How to use lightning css with tailwind 4

[juchom]

Hello,

I'm using tailwind 4 with postcss at the moment, but I would like to switch to Lightning CSS.

Here is my current eleventy.config.ts :

import cssnano from 'cssnano';
import postcss from 'postcss';
import tailwindcss from '@tailwindcss/postcss';

export default async function (eleventyConfig: EleventyConfig) {
  eleventyConfig.on('eleventy.before', async () => {
    //compile tailwind before eleventy processes the files
    const tailwindInputPath = path.resolve('./src/assets/css/styles.css');

    const tailwindOutputPath = './dist/assets/css/styles.css';

    const cssContent = fs.readFileSync(tailwindInputPath, 'utf8');

    const outputDir = path.dirname(tailwindOutputPath);

    if (!fs.existsSync(outputDir)) {
      fs.mkdirSync(outputDir, { recursive: true });
    }

    const result = await processor.process(cssContent, {
      from: tailwindInputPath,
      to: tailwindOutputPath,
    });

    fs.writeFileSync(tailwindOutputPath, result.css);
  });

  const processor = postcss([
    //compile tailwind
    tailwindcss(),

    //minify tailwind css
    cssnano({
      preset: 'default',
    }),
  ]);

How do you switch from postcss to lightning ?

Thanks in advance for any help

[dwkns]

I don't think you can in the way you're hoping to. There is no TailwindCSS plugin for LightningCSS

As I understand it (and I could be wrong) the Tailwind CLI uses Lightning as a dependency as does the Tailwind Vite Plugin. So if you want Lightning CSS to process your Tailwind CSS You'll need to use those.

You can use the TailwindCSS CLI in an Eleventy project by running it as a package.json script. It's fast, but it doesn't play nicely with the Eleventy Dev server. You can get reloads when you don't want them and not get them when you do.

You can use eleventy-plugin-vite with Tailwind as plugin. This works OK, but Vite has some strong opinions about how it processes assets in your project and can cause unexpected behaviours. I lost days to this.

After extensive research and testing, the best way I've found to run TailwindCSS 4 with Eleventy is the method you have above. I even made a plugin for Eleventy to make it easier.