1. npm install
2. npm install tailwindcss
3. 테일윈드 css config 파일만들기
1 | npx tailwindcss init | cs |
4. resources/css/tailwindcss.css 파일을 만들어서 다음과 같은 소스를 작성한다. https://tailwindcss.com/docs/installation/
@tailwind base; @tailwind components; @tailwind utilities;
4. webpack.mix.js 에 laravel mix를 작성해준다. css경로는 좀전에 만들어준 resources/css/tailwindcss.css 를 입력해준다.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('resources/css/tailwindcss.css', 'public/css', [
require('tailwindcss'),
]);
5. 터미널에서 npm run dev 를 입력하면 컴파일을 해준다. 컴파일된 파일은 public/css/tailwindcss.css 에 빌드된다.
6. css적용과 예제를 입력해보자 view/welcome.blade.php {{ mix('css/tailwindcss.css') }}
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <title>tailwindcss</title> <link rel="stylesheet" type="text/css" href="{{ mix('css/tailwindcss.css') }}"> </head> <body> <div class="text-4xl font-bold text-center text-blue-500">Hello world!</div> </body> </html> | cs |
