[Laravel] 라라벨 프로젝트에 Tailwind CSS 적용하기

 

---

 

라라벨 11 버전 기준, vue.js 사용을 전제합니다.

 

 

1.  Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

터미널에서 명령어를 입력해 Tailwind CSS를 설치한다.

완료하면 'tailwind.config.js'와 'postcss.config.js' 파일이 생성된다.

 

2. tailwind.config.js 파일 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: [
  	"./storage/framework/views/*.php",
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind를 적용할 파일을 설정해준다. 

 

3. app.css 파일 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

해당 내용을 추가한다.

 

4. app.js 파일 수정

import '../css/app.css'

3번에서 수정한 'app.css' 파일을 import한다.