Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework. Tuono support begins with Tailwind CSS v4.

You can start using it right away with the with-tailwind template:

tuono new tuono-with-tailwind --template with-tailwind

1. Install Tailwind CSS via your Node.js preferred package manager.

   npm install tailwindcss

2. Install also the @tailwindcss/vite vite plugin as devDependency

   npm install -D @tailwindcss/vite

3. Add the Tailwind CSS vite plugin to tuono.config.ts, as seen in the example below:

   import type { TuonoConfig } from 'tuono/config'
   import tailwindcss from '@tailwindcss/vite'
   
   const config: TuonoConfig = {
     vite: {
       plugins: [tailwindcss()],
     },
   }
   
   export default config

4. Add the Tailwind CSS directives to src/styles/global.css.

   @import 'tailwindcss';

Tailwind CSS is ready to go! You can now start using utility classes anywhere in your app.

import { JSX } from 'react'

export default function Example(): JSX.Element {
  return <h1 className="text-6xl font-bold">Tuono + Tailwind CSS!</h1>
}