Layer-based imports break plugins while single import causes visual bugs

[ApexResells]

Problem Description

I'm experiencing a critical CSS import configuration issue with Tailwind CSS v4.1.12 in a Nuxt 4 project. I need to find a way to make Scenario 1 work, because Scenario 2 (current) feels like a hacky way to do it.

Scenario 1: Using @import "tailwindcss";

• All plugins work correctly
• Visual bugs occur - styles are not applied properly
• Default Tailwind styles override custom styles

Scenario 2: Using layer-based imports

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

• Visual bugs disappear and app has intended styling
• Several plugins break due to missing dependencies

---

Environment Details

• Tailwind CSS: v4.1.12
• Vite Plugin: @tailwindcss/vite v4.1.12
• Framework: Nuxt 4.1.2
• Node: v24.0.2
• Package Manager: pnpm

Current Configuration

nuxt.config.ts:

import tailwindcss from "@tailwindcss/vite"

export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  // ... other config
})

main.css (current working but broken plugins):

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1366px;
  --breakpoint-2xl: 1736px;

  // ... custom color definitions
}

[wongjn]

What type of plugins are you talking about? It seems like if you want scenario 1 to work, you may need to @import the plugins' CSS into Tailwind's layers.

The main differences I see are:

• In scenario 1, Tailwind's CSS are in layers whereas in scenario 2, the CSS is not.
• In scenario 2, Preflight is present whereas in scenario 2, it has been removed.

[Marcelo-Barella]

The plugin that is causing problems when using the Scenario 2 is vue-tailwind-datepicker.

Doing some tests, it seems like adding @import "tailwindcss/index" at the top causes the visual bugs in the whole application.
When the index (or the whole package) is present, some classes come from the <style> level, and others come from node_modules/.pnpm/[email protected]/node_modules/tailwindcss/index.css. The problem is that the classes in index.css are not applied and are overwritten by the ones at the <style>, causing the visual bugs.

In the image below, the dark theme is applied, so the bg should be zinc-700, not white. The problem doesn't only occur with dark/light mode, displays, grids and any class with a prefix has a lower priority then the ones with no prefix.

The <style> tag is this:

[Marcelo-Barella]

Its still me, different account sorry lol

[wongjn]

Seems like you have two parallel compilations of Tailwind in your project, hence the unexpected overriding. See how the sources are different:

You should only include one instance to ensure style rules are sorted properly.

[ApexResells]

The only import of tailwindcss on the application is at main.css, there are other css files that use @reference to the main.css.
I also have import tailwindcss from "@tailwindcss/vite" at nuxt.config.ts.

Oooh, I think I found something, the vue-tailwind-datepicker also has tailwindcss as a dependency but with version 4.1.11, different from 4.1.12 that I have on the package.json.

I think that this plugin is messing things up by adding the style element inside the DOM with tailwind v4.1.11.