Nextjs不会编译所有tailwindcss的问题

Question

我正在尝试在Nextjs项目中使用Tailwindcss。问题在于，Tailwind Css内置的某些类无法正常工作（例如grid或active：伪类）。

我有此页面：

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，因为在此版本的Nextjs v9.2.1中已经存在postcss）

postcss.config.js

module.exports = {
  plugins: ["tailwindcss", "autoprefixer"]
};

并在全局styles/main中添加以下内容：

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

像这样_app.jsx：

页面/_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实现）

正如您所看到的，当我进入开发控制台并搜索网格时，某些类正在编译，而其他一些则没有。我在做错什么配置？

Answer 1

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