tailwind.config.ts 파일 설치가 안되는 문제

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[04-03] CSS-Module

해결된 질문

작성

279

수정됨

next js 14버전, tailwind도 3.4.17로 설치하였는데, @apply 가 먹히지 않네요. 어떻게 하나요?

globals.css에도
@tailwind base;

@tailwind components;

@tailwind utilities;

입력 시, 'Unkown at rule @tailwind' 라는 메시지가 송출됩니다.

tailwind.config.ts (js->ts 변경) 파일에도

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",

        철수가좋아하는색깔: "blue",
        영희가좋아하는색깔: "green",
      },
    },
  },
  plugins: [],
};

입력했습니다.

react react-native 하이브리드-앱 graphql next.js

답변 3

노원두

지식공유자

먼저, 답변을 공유해주신 Coding bear님 감사드립니다!^^

추가적인 오류사항 몇가지만 더 말씀드리면,

1. content 부분의 경로가 수업에서 설치되었을 때의 경로와 약간 다른 것 같아요!
다시 한번 확인해 주세요!

2. Unkown at rule @tailwind은 단지 vs-code가 "나는 이런거 몰라요" 하는 것이므로, 무시하셔도 됩니다!^^(너무 신경쓰이면, extension 등을 설치하여 경고를 없애도 좋습니다)

Coding bear

tailwindcss@3.4.17을 Next.js@14 에 적용할 때 ,

Next.js 에 타입스크립 적용 환경인가 그냥 JS 환경인가에 따라 tailwind.config.js 와 postcss.config.js 파일 코드가 다릅니다. tailwindcss 공식 문서 사이트에서는 Next.js 와 react-js 환경에서 설치하는 방법(install Tailwind CSS with Next.js)이니 그걸 참고하시고요.

Next.js 와 react-ts 환경에서는 다음과 같은 방법으로 설치합니다.

npm install -D tailwindcss@3 postcss autoprefixernpx
npx tailwindcss init -p

tailwind.config.ts 파일 내용

import type { Config } from "tailwindcss";
const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};

export default config;

postcss.config.mjs

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

globals.css

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

🌟 그런데 만일 nextjs 실행에서 문제가 아니라 vscode 에서 lint 에러라면.
Tailwind intelliSense 와 PostCSS 플러그인 설치되어 있는지 확인하시고요.

아니면 settings.json 파일에 다음과 같은 옵션을 주어 css 파일을 tailwindcss 파일로 연결해야 합니다.

"file.associations": {
    "css" : "tailwindcss"
},

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. chlwndud93님.

@apply가 적용되지 않는 문제는 주로 tailwind.config.js 또는 파일 셋업 과정에서의 문제에서 기인할 수 있습니다. 다음과 같은 사항들을 점검해 보시기 바랍니다.

tailwind.config.js 설정 확인: tailwind.config.js 파일 내에 올바르게 설정이 되었는지 확인하세요. 특히, purge 옵션에 올바른 파일 경로가 지정되어 있는지 확인해야 합니다.
apply Plugin 설치 여부: Tailwind CSS의 @apply를 사용하려면 установка postcss와 tailwindcss를 함께 설정해야 합니다. 관련 패키지들이 설치되어 있는지 확인해보세요.
프로젝트의 CSS 구조 확인: Tailwind CSS 클라이언트용 스타일 파일이 제대로 설정되어 있는지 점검합니다. 적절한 import 'tailwindcss/tailwind.css'; 등이 없는지 확인해 주세요.
next.js와 Tailwind 간 호환성: next.js 14버전과 tailwindcss 3.4.17이 서로 호환되지 않을 수도 있습니다. 설치 시의 가이드라인이나 공식 문서에 소개된 방법을 따랐는지 확인해 봐야 합니다.

유사한 사례에 대한 기존 해결책을 제공합니다:
- next.js, tailwindcss 적용 후 css가 먹히지 않을 때 해결 방법

위의 설명과 관련된 내용이 tailwind.config.js의 설정과도 연관이 있을 것입니다. 문제가 지속될 경우, 에러 메시지나 상세 설정 내용을 통한 추가 정보를 제공해 주신다면 더 나은 도움을 드릴 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

tailwind.config.ts 파일 설치가 안되는 문제