next.js - Regarding no tailwind config in nextjs project - Stack Overflow

admin管理员组

文章数量:1386891

In new version of nextjs with tailwind the tailwind css config file is not generating but i need to use the tailwind.config.js in my project for the setup of the next-themes. Can anyone help?

I tried creating the tailwind config but i was not able to do that.

In new version of nextjs with tailwind the tailwind css config file is not generating but i need to use the tailwind.config.js in my project for the setup of the next-themes. Can anyone help?

I tried creating the tailwind config but i was not able to do that.

• next.js
• tailwind-css
• config

Share Improve this question Follow asked Mar 17 at 8:20 Mayank SaxenaMayank Saxena 1 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

You don't need a tailwind.config.js for next-themes.

Change the dark variant to use the next-themes dark selector by using @custom-variant:

@import "tailwindcss";

@custom-variant dark ([data-theme="dark"], [data-theme="dark"] *);

<div class="text-red-500 dark:text-blue-500">Foo</div>

If you'd like to swap CSS colors automatically without using dark:, you can leverage the CSS variables:

@import "tailwindcss";

@custom-variant dark ([data-theme="dark"], [data-theme="dark"] *);

@theme {
  --color-primary: red;
}

@layer theme {
  [data-theme="dark"] {
    --color-primary: blue;
  }
}

<div class="text-primary">Foo</div>

Starting from January 2025, the npm install tailwindcss command will install the TailwindCSS v4 version. If you're working with the new stable release, it's better to follow

• my v4-specify answer (About from CSS-first and legacy JS based configs for next-themes)
• and Wongjn's answer (How to use CSS-first @custom-variant directive for next-themes).

If you're still working with v3, it might be useful to know that the v3 installation steps have changed, and you must install it version-specifically. See more here, below.

TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

Once this is done, the other steps remain unchanged:

• Get started with Tailwind CSS - TailwindCSS v3 Docs

// tailwind.config.js - from TailwindCSS v2 to TailwindCSS v3.4.0
module.exports = {
  darkMode: 'selector'
}

• next-themes for TailwindCSS v2 & v3 - Next Themes Docs

// tailwind.config.js - from TailwindCSS v3.4.1
module.exports = {
  // data-mode is used as an example, next-themes supports using any data attribute
  darkMode: ['selector', '[data-mode="dark"]']
  …
}

• next-themes for TailwindCSS v3.4.1 or higher - Next Themes Docs
• Customizing the selector - TailwindCSS v3 Docs

tailwind.config = {
  darkMode: ['selector', '[data-mode="dark"]']
  // or can use data-theme instead of data-mode
  // data-theme suggested by TailwindCSS v4 Docs
  // data-mode suggested by Next Themes Docs
}

function toggleDarkMode() {
  const body = document.body;
  
  if (body.getAttribute('data-mode') === 'dark') {
    body.removeAttribute('data-mode');
  } else {
    body.setAttribute('data-mode', 'dark');
  }
}

<script src="https://cdn.tailwindcss"></script>

<button
  class="px-4 py-2 rounded-lg border
    bg-white dark:bg-black
    text-black dark:text-white
    cursor-pointer
  "
  onclick="toggleDarkMode()"
>
  Toggle mode
</button>

TailwindCSS v4

To install TailwindCSS v4, please refer to the updated installation and upgrade guides.

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs

1.) New CSS-first configuration (without JavaScript)

Note: Starting from TailwindCSS v4, the CSS-first configuration is recommended. It continues to receive improvements. However, it is still possible to avoid it and use the legacy configuration instead. See below.

As Wongjn mentioned, starting from v4, tailwind.config.js is deprecated, and instead, you can use a CSS-first configuration with many new CSS directives.

CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript.

• Functions and directives - TailwindCSS v4 Docs
• New CSS-first configuration option in v4 - StackOverflow
• Adding Custom Styles: Customizing your theme - TailwindCSS v4 Docs
• @plugin directive - TailwindCSS v4 Docs

Unfortunately, the next-themes documentation currently doesn't include v4-compatible suggestions, but the TailwindCSS v4 documentation provides a solution. By using the @custom-variant directive, you can configure dark mode to apply when the parent is [data-theme="dark"]:

/* CSS-first configuration from TailwindCSS v4.0.0 */
@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

• Wongjn: Set dark variant from TailwindCSS v4 for next-themes - StackOverflow
• Using a data attribute - TailwindCSS v4 Docs
• @custom-variant directive - TailwindCSS v4 Docs

function toggleDarkMode() {
  const body = document.body;
  
  if (body.getAttribute('data-theme') === 'dark') {
    body.removeAttribute('data-theme');
  } else {
    body.setAttribute('data-theme', 'dark');
  }
}

<script src="https://cdn.jsdelivr/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
/* or can use data-mode instead of data-theme */
/* data-theme suggested by TailwindCSS v4 Docs */
/* data-mode suggested by Next Themes Docs */
</style>

<button
  class="px-4 py-2 rounded-lg border
    bg-white dark:bg-black
    text-black dark:text-white
    cursor-pointer
  "
  onclick="toggleDarkMode()"
>
  Toggle mode
</button>

2.) Legacy JavaScript-based configuration (with tailwind.config.js)

Note: In v4, the JavaScript-based configuration is still usable, although they are working on migrating all functionality to the CSS-first configuration. Most of the legacy JavaScript-based configuration options can be found in the v3 documentation, as this option is primarily kept open for those transitioning from v3.

If you don't like this, you can still use the legacy JavaScript-based configuration in v4 with the @config directive:

• @config directive - TailwindCSS v4 Docs
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@config "../../tailwind.config.js";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

// tailwind.config.js - from TailwindCSS v3.4.1 or v4.0.0
module.exports = {
  // data-mode is used as an example, next-themes supports using any data attribute
  darkMode: ['selector', '[data-mode="dark"]']
  …
}

• next-themes for TailwindCSS v3.4.1 or higher - Next Themes Docs
• Customizing the selector - TailwindCSS v3 Docs

本文标签： nextjsRegarding no tailwind config in nextjs projectStack Overflow