How to configure TailwindCSS 4 with Angular and Vite?

[DarthRainbows]

I have an Angular monorepo (application + libraries), built with Vite. My application is configured to use css files exclusively (no scss here).

I installed [email protected] and @tailwindcss/[email protected]. I added the tailwindcss import to my vite.config.mts:

/// <reference types='vitest' />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig(() => ({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/my-app',
  plugins: [
    angular(),
    nxViteTsPaths(),
    nxCopyAssetsPlugin(['*.md']),
    tailwindcss()
  ],
  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },
  test: {
    watch: false,
    globals: true,
    environment: 'jsdom',
    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    setupFiles: ['src/test-setup.ts'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/apps/my-app',
      provider: 'v8' as const,
    },
  },
}));

and imported tailwind in my css:

@import 'tailwindcss';
@import './theme/theme.css';

Running the build, no errors, and the generated css file contains a whole bunch of tailwind stuff. All good so far.

I added a FooComponent, with this html:

<div class="bg-red-500">
  this background should be red!
</div>

Rebuild, still no errors. Running the app, I see the FooComponent, but it does not have the expected red background. I examined the bundled css file: it is missing any classes that the build should have detected like bg-red-500.

As a second test, I added some color definitions to theme/theme.css:

@theme {
  --color-foo: #123456;
}

modify FooComponent:

<div class="bg-red-500 text-foo">
  this background should be red! Text should be #123456!
</div>
<div style="background-color: var(--color-red-500); color: var(--color-foo);">
  What about css variables?
</div>

Rebuild, still no colors. Both colors show up in a @theme blocks in the css, but are not added to a :root block like I'd expect for variable support.

Clearly, something is missing or misconfigured, but I am scratching my head as to what it could possibly be.

[wongjn]

You may need to use @source. Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[DarthRainbows]

@source does not change anything. I even tried using @source inline('bg'); to see if I could get it to include classes that way, and got nothing.

I put together a minimal reproduction https://github.com/DarthRainbows/angular-tailwind-demo

[wongjn]

It seems like the project is not using the Vite configuration. Deliberately throwing an error does not seem to impact the serve/build commands:

 import tailwindcss from '@tailwindcss/vite';

+throw new Error();
+
 export default defineConfig(() => ({

[DarthRainbows]

Well, after further research, it seems the answer is that the Angular team decided that vite's role in their ecosystem is rather more limited than in other frameworks. It's not used in the build process at all. 😞 The vite.config.mts file is used for vitest only.

I'm going to explore getting the PostCSS pipeline up and running, or maybe converting over to Analog, as that replaces Angular's build system and supports the full vite ecosystem.

[edit] on further review, it looks like PostCSS isn't compatible with Angular 19 either, at least not with Nx.

[DarthRainbows]

Converting my app to an AnalogJS (Nx + Vite + Analog + Angular) solved that issue. Thankfully, this app is sufficiently early in development that I can make that change without compromising my existing work.