Tailwind CSS + Laravel 세팅

Laravel 프로젝트에 Tailwind CSS 개발환경을 세팅해보자.

@tailwind 사용

/* resources/css/test01.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
// webpack.mix.js

// https://tailwindcss.com/docs/installation/#laravel-mix 1번
mix.postCss('resources/css/test01.css', 'public/css', [
    require('tailwindcss'),
]);

@import 사용

// resources/css/test02.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// tailwind-test02.config.js

module.exports = {
    theme: {},
    variants: {},
    plugins: [],
}
// webpack.mix.js

mix.sass('resources/css/test02.scss', 'public/css')
    // https://tailwindcss.com/docs/installation#laravel-mix 3번
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind-test02.config.js')],
    });

빠른 결론

Tailwind CSS 세팅을 해봤다. 공식 문서에는 @tailwind directive를 사용하는 방법과 @import를 사용하는 방법이 문서1, 문서2에 나뉘어 설명되어 있다. 관계가 있어 보이는 설정끼리 묶어서 적어봤다. 두 설정 환경을 섞으면 뭔가 에러가 나므로 그룹은 잘 나눈 것으로 보인다.

PostCSS라는 것이 두 설정에 모두 나타나서 찾아보니 새로운 CSS 변환 툴로 보인다. 다만 Sass처럼 언어를 갖고있지는 않고 플러그인을 통해 특정 언어를 쓸 수 있게 확장이 되나보다.

과제

@tailwind directive 사용방식에서 tailwind.config.js 를 설정하는 방법을 찾아보지는 않았다. 과제로…

Join the Conversation

2 Comments

Leave a comment

Your email address will not be published. Required fields are marked *