Tailwind CSS with Next.js not applicable

Question

Introduced Tailwind CSS to the Next.js environment.
I want to apply color.lime, but I get the following error.

./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: [],
};

__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;

Have you tried moving colors: { lime: color.lime } outside of extend: { } ? — user13506524
– user13506524, Commented Dec 30, 2020 at 13:01

juliomalves · Accepted Answer · 2020-12-30 15:36:53Z

2

You have a typo in your tailwind.config.js, you should access the color with colors.lime rather than color.lime.

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: [],
};

answered Dec 30, 2020 at 15:36

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS with Next.js not applicable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related