1. Tailwind CSS 설치

프로젝트 경로로 이동하여 npm을 통해 설치

npm install tailwindcss

2. Tailwind CSS 설정 파일을 생성

npx tailwindcss init

/ 경로에 아래와 같이 config 파일이 생성됨

3. 원하는 디렉토리에 tailwind.css 파일을 생성

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

tailwind.css에 위 소스처럼 import 해준다.

4.프로젝트에 적용

webpack.mix.js에 아래 내용을 추가

mix.postCss('resources/css/tailwind.css', 'public/css', [
    require('tailwindcss'),
]);

5. Blade 템플릿에서 사용

<link href="{{ asset('css/tailwind.css') }}" rel="stylesheet">

<div class="bg-blue-500 p-4">
    Hello, Tailwind CSS!
</div>