웹사이트 검색

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";