[V4] Using Lightning as Vite's CSS transformer ignores initial rules

[djmtype]

Using Tailwind v4 within an Astro project, here's my CSS.

@import "tailwind";

@theme {
--color-*: initial;
--color-redrum: red;
}

When lightningcss is set as the css.transformer, it ignores any props set to initial. Therefore, based on my example above, all of Tailwind's colors are included, regardless.

Now, if I remove lightningcss as the css.transformer, it works as advertised, and none of Tailwind's colors are included.

So, why does the expected behavior not work with lightningcss?

My Astro config, Vite options:

vite: {
    plugins: [tailwindcss()],
    css: {
      devSourcemap: true,
      transformer: "lightningcss",
      lightningcss: {
        targets: browserslistToTargets(browserslist('last 2 major versions and not dead and > .25%')),
        include: Features.Nesting,
        minify: false,
        sourceMap: true
      },
    },
    build: {
      cssMinify: 'lightningcss',
    },
  },

[djmtype]

I also tried the following, still including lightningcss as a css transformer. However, all of Tailwind's color props are still being unintentionally included:

@import "tailwindcss/theme" layer(theme); /* Unsure if this is 100% valid */
@import "tailwindcss/utilities" layer(utilities);

@theme {
  --color-*: initial;
}

Removing lightningcss as a transformer fixes this, but then I can't utilize the benefits of lightningcss.

[djmtype]

BTW, I swapped out lightningcss for postcss instead, and used postcss as a transformer. This seems to work as expected.

[djmtype]

Moving back to lightningcss in place of of postcss…
I found by installing vite-plugin-lightningcss and adding it to Vite's plugins, it corrects the behavior, while still utilizing lightning's transforms.

[Frikadellios]

Hi 👋
I cant find best example what I really love, with unplugin lighting css okclh, but, I find my working astro config.

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import tailwindcss from '@tailwindcss/vite'
import react from '@astrojs/react'
import { browserslistToTargets } from "lightningcss";
import browserslist from "browserslist";
import million from 'million/compiler'
import { remarkReadingTime } from './src/utils/readTime.mjs';

export default defineConfig({
	vite: {
		// root: "public/",
		build: {
		  cssMinify: "lightningcss",
		},
		css: {
		  transformer: "lightningcss",
		  lightningcss: {
			targets: browserslistToTargets(browserslist.loadConfig({ path: "./dist" })),
		  },
		},
		  plugins: [
			tailwindcss(),
			million.vite({
			  mode: 'react',
			  server: true,
			  auto: { threshold: 0.05, skip: ['useBadHook', /badVariable/g] },
			}),
		  ],
		},
	site: 'https://example.com',
	markdown: {
		remarkPlugins: [remarkReadingTime],
		drafts: true,
		shikiConfig: {
		  theme: 'material-theme-palenight',
		  wrap: true
		}
	  },
	  integrations: [mdx({
		syntaxHighlight: 'shiki',
		shikiConfig: {
		  theme: 'material-theme-palenight',
		  wrap: true
		},
		drafts: true
	  }), react()],
});

Your welcome 🤗

[djmtype]

@Frikadellios what happens when you declare this in your css file?

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

@theme {
  --color-*: initial;
}

Do you get all of Tailwinds color added to your project?

[Frikadellios]

@Frikadellios what happens when you declare this in your css file?

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

@theme {
  --color-*: initial;
}

Do you get all of Tailwinds color added to your project?

I even don't use classic colors, only okclh with effect's.

But, if you want create something special and use all collor you can do next things:

1. Use Tailwind 4 CLI command for clear app.css file (that's create clear TW theme )
2. Use only what you need and after use lightningcss CLI for minify for production, I mean, when you build your project, css file creating in dist folder Add macros for minify, and you should see differents :-)

Anyway, Tailwind 4 is amazing! But, it's not working well with many browser's.. (opera for example)

Another way to use it - Tailwind 4 plugin (for Astro or Bun Lightningcss)

I hope, TW team create a full release soon. Have a nice mood.

[djmtype]

Here's a video of my issue where the Vite plugin with LightningCSS seems to be ignoring my declarations in my @theme layer:

https://cloudup.com/cOmH9Ssov4e

[jaskang]

same . 'initial' not working

[Frikadellios]

Here find the best solution for Close this question for ever!
Here is example working on Cloudflare pages

[djmtype]

@Frikadellios It seems like you are using vite-plugin-lightningcss rather than the official LightningCSS Vite integration, right?

As I mentioned earlier, I never had an issue with vite-plugin-lightningcss, rather I had the problem with LightningCSS/Vite official integration. https://lightningcss.dev/docs.html#with-vite

Regardless, as of Tailwind alpha-24, this issue appears to be fixed.

My Astro config:

import { defineConfig } from 'astro/config';
import { SITE } from "./src/config";
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  site: SITE.url,
  compressHTML: false,
  vite: {
    plugins: [tailwindcss()],
    css: {
      transformer: "lightningcss",
    },
    build: {
      cssMinify: "lightningcss",
    },
  }
});