带Next.js的顺风CSS不适用_Next.js_Tailwind Css

带Next.js的顺风CSS不适用

next.js

带Next.js的顺风CSS不适用,next.js,tailwind-css,Next.js,Tailwind Css,将Tailwind CSS引入Next.js环境。我想应用color.lime，但出现以下错误 ./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tai

将Tailwind CSS引入Next.js环境。
我想应用

color.lime

，但出现以下错误

./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tailwind.css)
ReferenceError: color is not defined

tailwind.config.js

const colors = require(`tailwindcss/colors`);
module.exports = {
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // 'media' or 'class'
  theme: { extend: { colors: { lime: color.lime } } },
  variants: { extend: {} },
  plugins: [],
};

\uu app.tsx

import "tailwindcss/tailwind.css";
import type { AppProps } from "next/app";
import Head from "next/head";

const App = (props: AppProps) => {
  return (
    <>
      <Head>
        <title>nexst</title>
      </Head>
      <props.Component {...props.pageProps} />
    </>
  );
};

// eslint-disable-next-line import/no-default-export
export default App;

导入“tailwindcss/tailwind.css”；
从“next/app”导入类型{AppProps}；
从“下一个/Head”导入Head；
const App=（props:AppProps）=>{
返回(
下一个
);
};
//eslint禁用下一行导入/无默认导出
导出默认应用程序；

如果您的

tailwind.config.js

中有输入错误，您应该使用

colors.lame

而不是

color.lame

访问颜色

const colors = require(`tailwindcss/colors`);
module.exports = {
    purge: ["./src/**/*.{js,ts,jsx,tsx}"],
    darkMode: false, // 'media' or 'class'
    theme: { extend: { colors: { lime: colors.lime } } }, // here use `colors`
    variants: { extend: {} },
    plugins: [],
};

你试过把

colors:{lime:color.lime}

移到

extend:{}

之外吗？谢谢！！！！！！！