tailwindcss가 next.js와 함께 작동하지 않습니다.설정에 무슨 문제가 있습니까?
웬일인지 그래.tailwind.
제 설정에 무슨 문제가 있나요?
스타일 폴더 - tailwind.css
@tailwind 베이스;
/* Write your own custom base styles here */
/* Start purging... */
@tailwind components;
/* Stop purging. */
/* Write you own custom component styles here */
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* Start purging... */
@tailwind utilities;
/* Stop purging. */
/* Your own custom utilities */
....
_app.disples
import React from "react";
// import "styles/global.scss";
import 'styles/tailwind.css'
import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";
function MyApp({ Component, pageProps }) {
return (
<ProvideAuth>
<>
<NavbarCustom
bg="white"
variant="light"
expand="md"
logo="icons/Logo_512px.png"
/>
<Component {...pageProps} />
내가 뭘 잘못하고 있지?너무 혼란스러워서 보통 이런 종류의 설정은 괜찮아요.
이것은 btw - https://moodmap.app/ 사이트입니다.
아래 정보를 사용하여 변경을 가했지만 여전히 같은 문제를 이상하게 처리했습니다.
https://httpsmap.app/ 는 사이트의 예입니다.
tailwind.config.syslog
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333',
},
},
},
variants: {},
plugins: [],
}
postcss.config.disples
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
],
}
{
"name": "MoodMap",
"version": "0.1.0",
"private": true,
"keywords": [
"MoodMap"
],
"dependencies": {
"@analytics/google-analytics": "0.2.2",
"@stripe/stripe-js": "^1.5.0",
"analytics": "0.3.1",
"fake-auth": "0.1.7",
"mailchimp-api-v3": "1.13.1",
"next": "9.5.3",
"query-string": "6.9.0",
"raw-body": "^2.4.1",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-hook-form": "4.10.1",
"react-query": "2.12.1",
"react-transition-group": "^4.4.1",
"stripe": "^8.52.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"stylelint": "^13.7.1",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^1.8.9"
}
}
감사합니다!
지만, 는 이 문제를 .globals.css음음음같 뭇매하다
전에
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');
@tailwind base;
@tailwind components;
@tailwind utilities;
끝나고
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';
nextJs를 사용하여 프로젝트를 작성한 개발자의 경우.
에 tailwind.config.js에는 파일에 대한 올바른 경로가 필요합니다.
module.exports = {
content: ["./pages/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
를 작성하는 nextjs는 nextjs를 합니다.pages서 "" " " " " " " " "index.js파일이 있습니다.따라서 https://tailwindcss.com/docs/installation/using-postcss의 코드 스니펫(아래 참조)이 완전히 일치하지 않습니다.위의 내용이나 취향대로 변경해 주세요.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
내 경우 Tailwind 설정 파일을 올바르게 설정했지만 Tailwind 스타일이 적용되지 않았습니다.의 .next 및 running " " " 。next dev도움이 되었습니다.
이 솔루션은 다음과 같은 이점을 제공합니다../src/... 로의 전송tailwind.config.js음음음음JS +폴더를 .JS + Tailwindcss src src js js js 。
내 프로젝트 중 하나가 패키지 버전을 설치했습니다.
"next": "11.1.0",
"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"
의 이 tailwind.config.js동작하고 있었습니다.
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
};
최근에 다음과 같은 패키지로 새로운 프로젝트를 시작했습니다.
"next": "12.0.8",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"
이전 설정에서는 동작하지 않았습니다.그래서 다음과 같이 변경했습니다.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
global.css에서 다음과 같이 Import하면 문제가 해결되었습니다.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
공식 튜토리얼에 따라 TailwindCSS를 NextJS 앱(https://tailwindcss.com/docs/guides/nextjs)에 설치했지만 여전히 작동하지 않았습니다.
보니 수입하는 것을 .global.css내 메인 앱 파일에 넣을 수 있습니다.
추가 -
import "../styles/globals.css";
app.tsx에 저장해 주셔서 감사합니다.
다음 버전에 아직 문제가 있는 사용자:
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
Nx + Next.js 환경에서는 다음 구성 파일을 사용할 수 있습니다.
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
// tailwind.config.js
const { join } = require('path');
module.exports = {
content: [
join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
],
theme: {
extend: {},
},
plugins: [],
};
저는 몇 시간 동안 그것을 만지작거린 후 가장 이상한 방법으로 작업을 시작했습니다.저는 컴포넌트 중 하나에 있는 요소에 클래스를 추가하고 global.css 파일에 해당 클래스의 커스텀 CSS를 작성했습니다.그 후 모든 테일윈드 클래스가 반영되었습니다.추적하고 수정해야 하는 순풍 코드의 버그일 수 있습니다.
방금 앱을 에서 로 이행했기 때문에CRA에는 에에이 named named named named app app app app app app app app app app app app app app 。features 그 에는 각각의 에 대한 .Redux슬라이서 및 컴포넌트
한 것은 '우리'를 입니다.features입니다.tailwind.config.js:
이전:
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
]
끝나고
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./features/**/*.{js,ts,jsx,tsx}",
]
_app.js 파일 inside pages 폴더를 추가한 후 이 코드를 추가합니다.globals.css 경로가 정확해야 합니다.
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
일부 파일에서도 같은 문제가 있었습니다.
하고 CSS 한 후 CSS가 있는 경우@apply잘 작동한다.
나 방금 경험했어.config 큰것 . 는 ' file config missing'을 'postcss'로 순풍을 초기화하기 때문입니다. 돛단풍 초기화npx tailwind init 아니라, 이에요.npx tailwind init -p(postcss file config 생 ( ( ( ( ( ( ( ( ( 。
사람의는 않지만, 은 단순히 되었습니다.globals.css공유해야 할 솔루션에 대한 자세한 내용은 없습니다.
완전히 새로운 Next.js 프로젝트로 시작하여 지시에 따라 Tailwind CSS를 추가하였습니다.저는 이 프로젝트에 나와 있는 모든 해결책을 시도해 보았습니다.
- 샘플 Next.js 프로젝트 작성 스크립트 사용(작업 완료)
- 예제 프로젝트에서 각 파일 복사 및 붙여넣기
- 동일한 버전을 사용.
- 했습니다.
.next했습니다. - 테일윈드를 포함하기 위해 다양한 방법을 사용했다.
하지만 정확한 해결책은 다음과 같습니다.은 globals.css의 .@tailwind 일부 )@import위의 지시사항)으로 인해 갑자기 테일윈드 CSS가 활성화되었습니다.방금 오려낸 것을 붙여 넣는 것으로, 이 새로운 「일하는」상태를 유지할 수 있었습니다.
캐시된 것이 하기 된 는 캐시된 것을 했습니다)..next를 편집하고 .globals.css이치
다른 사람이 머리카락을 쥐어뜯는 것을 막았으면 좋겠어요.
postcss.config.disples
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.syslog
module.exports = {
mode: 'jit',
content: [
"./**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
저도 이런 경험이 있지만, 저의 해결책은 tailwind.config.js를 편집하는 것이었습니다.
버전에 따라 다름
버전 2의 경우
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
버전 3의 경우
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './containers/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
<!-- You have to add paths to folders in which you are using
tailwindcss in the tailwind.config.js file -->
<!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the "content"-->다른 간단한 원인은 철자가 틀린 컴포넌트/페이지 폴더입니다.철자가 올바른지 확인합니다.
다음 js에서 문제를 해결할 수 있는 다른 해결책은 다음과 같습니다.
tailwind.config.timeout에 다음 설정을 추가합니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
subject: {
extend: {},
},
plugins: [require("@tailwindcss/typography"),require('@tailwindcss/forms'),],
};
및 postcss.config.display에 있습니다.
module.exports = {
plugins: ['tailwindcss','postcss-preset-env'],
};
마지막으로 다음 js 구성에서는 이 기능을 추가하기 위해 이 기능을 추가합니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
swcMinify: true,
reactStrictMode: true,
experimental: {
concurrentFeatures: false, // <- Set this option to false.
serverComponents: true,
},
}
module.exports = nextConfig
global.css에서 스타일을 만들고 추가해야 합니다.
@tailwind base;
@tailwind utilities;
@tailwind components;
이 질문의 모든 것을 시도해 본 결과 nextjs를 업데이트했습니다.
npm install next@displays
문제는 /pages/_app.js가 없었기 때문에 global.css는 해석되지 않았습니다.
다음 내용으로 /pages/_app.js를 작성하면 문제가 해결되었습니다.
import '../styles/globals.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
https://nextjs.org/docs/basic-features/built-in-css-support 를 참조해 주세요.
방금 Next.js 프로젝트를 재설치하고 Tailwind의 가이드와 함께 진행했는데 효과가 있었어요!
문서: https://v2.tailwindcss.com/docs/guides/nextjs
모든 것을 2시간 동안 시도하고 실행만 하면 됩니다.
npm i tailwindcss@3.0.0
날 위해 일했어
저도 모르게 정규식에 공간을 넣어서 제 코드가...
content: [
"./pages/**/*.{ js, ts, jsx, tsx}",
"./components/**/*.{ js, ts, jsx, tsx}",
],
이것이 에러의 원인이 되고 있기 때문에, 다시 공식 사이트에서 카피합니다.처럼 보이게 하다
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
바보 같은 실수였다는 건 알지만 가끔 당신은 무심코 그런 짓을 해요.:)
저에게 있어서 문제는 어플리케이션을 만드는 것이었습니다.npx create-next-app@latestcc src 폴폴 cc cc cc cc다
? Would you like to use `src/` directory with this project? › No / Yes
[ ] 를 한 Yes가 필요합니다.tailwind.config.js 삭제:
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
설정이 너무 큰 것 같아요.오늘날에는 훨씬 더 간단한 것으로 이를 달성할 수 있습니다.
우선 CSS를 nextjs에 로드할 필요가 없어지고 모듈이 네이티브로 지원됩니다.(CSS로 삭제할 수 있습니다)
둘째, 새로운 버전을 사용하는 경우 테일윈드는 더 이상 이렇게 정교한 설정이 필요하지 않습니다.
따라서 postcss-preset-env를 설치해야 합니다만, 이것으로 빅 설정이 불필요하게 됩니다.
이 예에서는, https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss 를 참조해 주세요.
언급URL : https://stackoverflow.com/questions/64032166/tailwindcss-not-working-with-next-js-what-is-wrong-with-the-configuration
'source' 카테고리의 다른 글
| Wordpress - 루트 디렉토리를 가져오시겠습니까? (0) | 2023.03.31 |
|---|---|
| Wordpress를 Django나 Ruby on Rails와 같은 프레임워크로 대체할 수 있습니까? (0) | 2023.03.31 |
| JQuery AJAX를 통해 FormData와 문자열 데이터를 함께 전송하시겠습니까? (0) | 2023.03.31 |
| Angular Form 제출의 모든 필드 유효성 검사 트리거 (0) | 2023.03.31 |
| Wordpress PHP에서 메타 태그를 사용하는 동적 페이스북 (0) | 2023.03.31 |