Unable to Utilize Custom Colors in Tailwind CSS within NextJS

Question

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

I am currently experimenting with NextJs and Tailwinds CSS for a new project. However, I keep encountering an error when attempting to apply a custom background color:

Failed to compile
./styles/globals.css:7:12
Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css The `bg-[#06202A]` class does not exist. Make sure that any `@import` statements are processed correctly before Tailwind CSS sees your CSS, as `@apply` can only be utilized for classes in the same CSS tree.

  5 | @layer base {
  6 |   body {
> 7 |     @apply bg-[#06202A] text-gray-300;
    |            ^
  8 |   }
  9 | }

Code

index.js

import Head from "next/head";
import Image from "next/image";
import Header from "../components/Header";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Hulu 2.0</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      {/* Header */}
      <Header />

      {/* Nav */}

      {/* Results */}
    </div>
  );
}

tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

globals.css

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

System Info:

OS: macOS BigSur 11.3 Node Version: 16.2.0

css reactjs colors next.js tailwind-css

Answer 1

Answer №1

If you want to harness the power of the unique arbitrary value syntax (using square brackets), you must activate JIT mode and ensure you are running Tailwind version 2.1 or higher. By doing so, your CSS will be compiled dynamically, allowing you to utilize the square bracket syntax and step outside the limitations of your design system.

For more detailed information on JIT mode, check out the Tailwind documentation.

To activate JIT mode:

// tailwind.config.js
module.exports = {
  mode: 'jit', // include this line
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}

Answer 2

If you want to harness the power of the unique arbitrary value syntax (using square brackets), you must activate JIT mode and ensure you are running Tailwind version 2.1 or higher. By doing so, your CSS will be compiled dynamically, allowing you to utilize the square bracket syntax and step outside the limitations of your design system.

For more detailed information on JIT mode, check out the Tailwind documentation.

To activate JIT mode:

// tailwind.config.js
module.exports = {
  mode: 'jit', // include this line
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}

Answer 3

Answer №2

In an extended theme, you have the ability to directly access custom colors and variables. I have included my entire tailwind.config.js file for reference.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    // Configuration settings here
};

To use the variables defined in `tailwind.config.js`, make sure to set them in your base layer with their corresponding values (e.g., hex/rgb/hsl). Once imported into your root file (_app.js if using Next.js or index.js), they will be applied globally.

Non-variable colors like `text-olive-300` will display a color widget next to them, whereas CSS variables such as `text-secondary-0` will not.

./styles/base.css

@layer base {
    #__next {
        // Styles for __next element
    }

    :root {
        /* CSS variables definitions */
    }

    /* Other base styles */

}

I typically organize my CSS files by breaking them up into individual layers within a styles directory and then import them all into an `index.css` file which is further imported into the main project.

For example:

./styles/components.css

@layer components {
    .fit {
        // Styling for fit class
    }
}

./styles/utilities.css

@layer utilities {
    /* Utility classes and styles */
}

./styles/index.css

@import 'tailwindcss/base';
@import './base.css';

@import 'tailwindcss/components';
@import './components.css';

@import 'tailwindcss/utilities';
@import './utilities.css';

Lastly, ensure to import ./styles/index.css into the root of your application. For PostCSS configuration needed for this setup, check out the contents of postcss.config.js:

module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss',
        'postcss-nesting',
        'postcss-flexbugs-fixes',
        /* Additional plugins here */
    ]
};

Answer 4

In an extended theme, you have the ability to directly access custom colors and variables. I have included my entire tailwind.config.js file for reference.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    // Configuration settings here
};

To use the variables defined in `tailwind.config.js`, make sure to set them in your base layer with their corresponding values (e.g., hex/rgb/hsl). Once imported into your root file (_app.js if using Next.js or index.js), they will be applied globally.

Non-variable colors like `text-olive-300` will display a color widget next to them, whereas CSS variables such as `text-secondary-0` will not.

./styles/base.css

@layer base {
    #__next {
        // Styles for __next element
    }

    :root {
        /* CSS variables definitions */
    }

    /* Other base styles */

}

I typically organize my CSS files by breaking them up into individual layers within a styles directory and then import them all into an `index.css` file which is further imported into the main project.

For example:

./styles/components.css

@layer components {
    .fit {
        // Styling for fit class
    }
}

./styles/utilities.css

@layer utilities {
    /* Utility classes and styles */
}

./styles/index.css

@import 'tailwindcss/base';
@import './base.css';

@import 'tailwindcss/components';
@import './components.css';

@import 'tailwindcss/utilities';
@import './utilities.css';

Lastly, ensure to import ./styles/index.css into the root of your application. For PostCSS configuration needed for this setup, check out the contents of postcss.config.js:

module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss',
        'postcss-nesting',
        'postcss-flexbugs-fixes',
        /* Additional plugins here */
    ]
};

Answer 5

Answer №3

Encountered an issue while using VsCode and devised a solution

Tailwind version 2.2.16 paired with NextJs version 12.0.4

Include the code snippet below in your tailwind.config.js file

module.exports = {
  mode: 'jit'
}

Create a new file named css_custom_data.json in your project directory and paste the provided code

    {
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
   // Additional directives here
  ]
}

Navigate to settings.json in VsCode (cmd+,) and insert the following configuration

 "css.customData": ["./css_custom_data.json"]

Answer 6

Encountered an issue while using VsCode and devised a solution

Tailwind version 2.2.16 paired with NextJs version 12.0.4

Include the code snippet below in your tailwind.config.js file

module.exports = {
  mode: 'jit'
}

Create a new file named css_custom_data.json in your project directory and paste the provided code

    {
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
   // Additional directives here
  ]
}

Navigate to settings.json in VsCode (cmd+,) and insert the following configuration

 "css.customData": ["./css_custom_data.json"]

Answer 7

Answer №4

When using Tailwind CSS, it is crucial to make sure that the tailwind.config.js file contains the appropriate folder paths for your project. This will prevent any issues with class compilation during the build process.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/views/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

In my situation,

  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  './src/app/**/*.{js,ts,jsx,tsx,mdx}',

these default folder paths were originally included. I had to manually add

'./src/views/**/*.{js,ts,jsx,tsx,mdx}',

for the views folder in order for Tailwind to compile classes appropriately within that directory.

I trust this information will prove beneficial :)

Answer 8

When using Tailwind CSS, it is crucial to make sure that the tailwind.config.js file contains the appropriate folder paths for your project. This will prevent any issues with class compilation during the build process.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/views/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

In my situation,

  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  './src/app/**/*.{js,ts,jsx,tsx,mdx}',

these default folder paths were originally included. I had to manually add

'./src/views/**/*.{js,ts,jsx,tsx,mdx}',

for the views folder in order for Tailwind to compile classes appropriately within that directory.

I trust this information will prove beneficial :)

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

Code

index.js

tailwind.config.js

globals.css

System Info:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Encountered a snag with the getStaticProps() function in my Next.js project

React error management not functioning as anticipated

Is the background image unable to fill up the entire screen?

Tips for resolving the issue of background images not appearing in React JS

Struggling with transferring form input data to a different file using JavaScript, Node.js, React.js, and Next.js

Some characters are not compatible with the CSS writing-mode feature

Consolidate radio group in Vuetify platform

The cache of React query fails to persist after using queryClient.setQueryData

preserving the current state even after refreshing the page

Leverage information retrieved from API in a separate React component

applying conditional rendering in vue.js

What could be the reason for the inconsistent resizing behavior of this DIV container?

I encounter difficulty utilizing assets within my React application

My React app is facing challenges in production due to issues with webpack

Customize material-ui themes using useStyles / jss

typescriptIs there a more efficient approach to typing optional values without a default value in

Is there a method to store only a portion of the string object in async-storage?

How can I switch the visibility of two A HREF elements by clicking on one of them?

Having trouble fetching session data from the server side with next-auth in a Next.js application

What other option can be used in place of white-space:nowrap?