TailwindCSS integration

What is Tailwind CSS?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

For more information take a look at Tailwind CSS

How to configure an Aurelia 2 project with Tailwind CSS v4?

Tailwind CSS 4.1 introduces a simplified setup: install Tailwind, add the official plugin for your bundler, then import tailwindcss once inside your stylesheet. No @next tags, no tailwind.config.js (unless you want customizations), and no manual content paths.

Step 1: Create an Aurelia project

Choose your preferred bundler. The steps below highlight Vite first, followed by Webpack, Parcel, and the standalone CLI.

Step 2: Install Tailwind packages

Vite (recommended)

Webpack

Parcel

Standalone CLI / static builds

Step 3: Configure your bundler

Vite configuration

Webpack configuration

Create postcss.config.js:

Update webpack.config.js so .css files run through postcss-loader:

Parcel configuration

Parcel reads PostCSS config automatically. Create .postcssrc:

CLI workflow

If you aren’t using a bundler, wire up the CLI directly:

The CLI watches your HTML entry file and any imports it discovers, so the build remains tree-shaken even without a config file.

Step 4: Import Tailwind once

Add this line to the top of your root stylesheet (for example src/my-app.css):

This single import injects Tailwind’s base, component, and utility layers. The old @tailwind base; / @tailwind utilities; directives aren’t used in v4.

Step 5: Run the project

Tailwind’s compiler runs alongside your bundler, so editing Aurelia templates immediately updates the generated CSS.

How to test Tailwind styles quickly

Insert the following snippet into any view:

Seeing the styled alert confirms that Tailwind’s classes are available in your bundle.

Content detection & build optimization

Tailwind v4 automatically scans your project for class usage, removing unused styles during both dev and production builds. You no longer set content: [] in tailwind.config.js. If you need to extend the theme or register plugins, create a config manually:

During npm run build, Tailwind’s compiler and Lightning CSS minify the stylesheet and automatically add vendor prefixes.

Migrating from Tailwind v3

1. Replace the old @tailwind base/components/utilities directives with @import "tailwindcss";

2. Uninstall autoprefixer and postcss unless another tool in your stack needs them—Tailwind v4 handles prefixing internally.

3. Remove manual content

After migrating, you benefit from zero-config tree shaking, smaller CSS bundles, and much faster incremental builds.