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

Guide to utilizing an if statement to return a string as the title in a Tooltip pro

Prevent the onClick event in the parent container div from triggering when clicking on a child element

Utilizing a (helper) function within Redux

Caution: The value supplied to Material-ui Autocomplete is not valid

Displaying svg files conditionally in a react native application

Displaying the appropriate DIV element based on the value entered by the user

Adjust text alignment of SVG elements using CSS

Material UI - Clear all designs from the slate

Excessive API requests can occur when Redux dispatches an action multiple times

Creating a horizontal alignment for social media icons

A guide to integrating server-side rendering for Material UI's media queries in NextJs

The error "Prop does not exist on type 'PropsWithChildren'" occurs when attempting to dispatch an action with react-redux

children blocking clicks on their parents' divs

What are some creative methods to apply CSS styling to material-table in React?

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

Loss of styling is observed with jQuery's html() function