Setting up Tailwind CSS in a Hilla project

Hilla uses the Vaadin Lumo design system that comes with a set of simple of utility classes for common styling tasks. If you need more advanced functionality, like support for responsive layouts, you can easily switch to using the more comprehensive Tailwind CSS library.

Here are the steps to set up Tailwind CSS in your Hilla project.

1. Create and open a project

If you don't already have a Hilla project, create one with the following command:

npx @hilla/cli init --react hilla-tailwind
cd hilla-tailwind

2. Install Tailwind and PostCSS

Next, let's install Tailwind CSS, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

3. Set up PostCSS config

Create a postcss.config.js file in your project root with the following content:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. Update Tailwind config

Now, update your tailwind.config.js to use the frontend folder:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./frontend/index.html", "./frontend/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. Create and import a main CSS file

Create a frontend/main.css file with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import the main.css file in your App.tsx:

import "./main.css";

6. Remove conflicting Lumo utility classes

To avoid conflicts, remove the "utility" item from the array in frontend/themes/<project-name>/theme.json:

{
  "lumoImports": ["typography", "color", "spacing", "badge"]
}

7. Start the application

Start your app by running Application.java or with the default maven goal mvn.

8. All set!

You can now use Tailwind classnames in your components! Learn more about using Tailwind here.

Note: If you use any views created by the CLI, remember to change Lumo utility classnames like p-m to appropriate Tailwind classnames like p-4.