reactjs - React 프로젝트에서 Tailwindcss가 작동하지 않음
저는 Vite로 생성된 React-타입스크립트 프로젝트에 Tailwind를 통합하려고 하고 있습니다. Tailwind 설정 가이드를 단계별로 따라 했지만, 이제 이 경고가 나타나고 있습니다:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
이것은 제 디렉토리 구조입니다:
│ .eslintrc.json
│ .gitignore
│ .prettierrc
│ index.html
│ package-lock.json
│ package.json
│ postcss.config.cjs
│ tailwind.config.cjs
│ tsconfig.json
│ tsconfig.node.json
│ vite.config.ts
│
├───.vscode
│ settings.json
│
├───public
│ litaci-logo.png
│ litaci.png
│
└───src
│ App.tsx
│ index.css
│ main.tsx
│ vite-env.d.ts
│
├───components
│ Navbar.tsx
│
├───containers
│ Page.tsx
│
├───pages
│ Root.tsx
│
└───store
tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js, jsx, ts, tsx}',
'./src/pages/**/*.{js, jsx, ts, tsx}',
'./src/components/**/*.{js, jsx, ts, tsx}',
'./src/containers/**/*.{js, jsx, ts, tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
.prettierrc 파일을 추가하기 전에는 잘 작동했어요. 이 GitHub 논의를 따라 해봤지만 소용이 없었어요. Tailwindcss 클래스가 전혀 작동하지 않습니다.
답변 #1
다음 프로젝트에서는 스타일이 src/pages 디렉터리에서만 적용되지 않습니다. 그래서 그냥 하드코딩하고 모든 페이지에 import "tailwindcss/tailwind.css"를 추가하세요.
마침내 그게 저에게 효과가 있었어요
// src/pages/about.tsx import "tailwindcss/tailwind.css";