Nextjs没有编译所有tailwindcss类答案

【问题标题】：Nextjs not compiling all tailwindcss classesNextjs没有编译所有tailwindcss类
【发布时间】：2020-05-25 09:16:26
【问题描述】：

我正在尝试在我的 Nextjs 项目中使用 Tailwindcss。问题是 Tailwind Css 内置的一些类不起作用（如网格或活动：伪类）。

我有这个页面：

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（仅使用不带 Nextcss 的 postcss.config.js，因为 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实现）

如您所见，一些类正在编译，而另一些则没有，当我进入开发控制台并搜索网格时，没有一个具有这样名称的类。我在配置中做错了什么？

【问题讨论】：

你需要在 postcss.config.js 中导入 tailwindcss 并作为变量而不是字符串导入应该适合你。如果你可以分享一个 github repo 它会更有用
@Nikas Nextjs的官方文档说：Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.（文末）。但是问题可能是自动前缀的默认配置被禁用。我会尽快将 github 存储库与该项目链接。
确保您使用的是 tailwindcss 1.2。网格似乎是最近才添加的。
你有tailwind.config.js吗？如果有，可以在这里添加吗？

标签： reactjs next.js postcss tailwind-css

【解决方案1】：

所以我的问题是我使用的 Tailwind 版本（以及我配置的变体）。创建一个新项目并安装最新版本的 Tailwind 解决了 Grid 问题。与伪类相关的问题是由于 Tailwind 默认情况下不包含所有实用程序变体而引起的。 Default variants

【讨论】：

谢谢，将文档中的变体粘贴到我的 tailwind.config.js 中，修复了某些类在 nextjs 中对我不起作用的问题