Nextjs 没有编译所有的 tailwindcss 类
Nextjs not compiling all tailwindcss classes
我正在尝试在我的 Nextjs 项目中使用 Tailwindcss。问题是 Tailwind Css 内置的某些 classes 无法正常工作(例如网格或活动:伪 class)。
我有这个页面:
Index.jsx
import React from "react";
const Index = () => (
<div className="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
);
export default Index;
呈现:
而不是:
我将 Nextjs 配置为使用 Tailwindcss(只使用 postcss.config.js 而没有使用 Nextcss,因为 postcss 已经在这个版本的 Nextjs v9.2.1 中)
postcss.config.js
module.exports = {
plugins: ["tailwindcss", "autoprefixer"]
};
并添加了全局 styles/main
:
@tailwind base;
@tailwind components;
@tailwind utilities;
到 _app.jsx
这样:
pages/_app.jsx
/* eslint-disable react/jsx-props-no-spreading */
import React from "react";
import App from "next/app";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import initStore from "../rx";
import "../styles/index.css";
// eslint-disable-next-line react/prop-types
const CustomApp = ({ Component, pageProps, store }) => (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
CustomApp.getInitialProps = async appContext => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default withRedux(initStore)(CustomApp);
(忽略 redux 实现)
如您所见,一些 classes 正在编译,而另一些则没有,当我进入开发控制台并搜索 grid 时,没有 class 这样的姓名。我在配置中做错了什么?
所以我的问题是我使用的 Tailwind 版本(以及我配置的变体)。创建一个新项目并安装最新版本的 Tailwind 解决了网格问题。与 pseudo-classes 相关的问题是因为 Tailwind 默认不包含所有实用程序变体。 Default variants
我正在尝试在我的 Nextjs 项目中使用 Tailwindcss。问题是 Tailwind Css 内置的某些 classes 无法正常工作(例如网格或活动:伪 class)。
我有这个页面:
Index.jsx
import React from "react";
const Index = () => (
<div className="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
);
export default Index;
呈现:
而不是:
我将 Nextjs 配置为使用 Tailwindcss(只使用 postcss.config.js 而没有使用 Nextcss,因为 postcss 已经在这个版本的 Nextjs v9.2.1 中)
postcss.config.js
module.exports = {
plugins: ["tailwindcss", "autoprefixer"]
};
并添加了全局 styles/main
:
@tailwind base;
@tailwind components;
@tailwind utilities;
到 _app.jsx
这样:
pages/_app.jsx
/* eslint-disable react/jsx-props-no-spreading */
import React from "react";
import App from "next/app";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import initStore from "../rx";
import "../styles/index.css";
// eslint-disable-next-line react/prop-types
const CustomApp = ({ Component, pageProps, store }) => (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
CustomApp.getInitialProps = async appContext => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default withRedux(initStore)(CustomApp);
(忽略 redux 实现)
如您所见,一些 classes 正在编译,而另一些则没有,当我进入开发控制台并搜索 grid 时,没有 class 这样的姓名。我在配置中做错了什么?
所以我的问题是我使用的 Tailwind 版本(以及我配置的变体)。创建一个新项目并安装最新版本的 Tailwind 解决了网格问题。与 pseudo-classes 相关的问题是因为 Tailwind 默认不包含所有实用程序变体。 Default variants