Cody Bontecou

Appearance

Tailwind CSS v4 and Nuxt ​

Tailwind CSS v4 alpha was announced today and it has some amazing new features:

  • Up to 10x faster
  • Smaller footprint
  • Rust where it counts
  • One Dependency
  • Custom parser

Due to Tailwind's first-class support for Vite, it's simple to get a Nuxt application up and running with their latest releases.

This post assumes you have a Nuxt application setup.

Integrate Tailwind CSS v4 ​

  1. Install the Tailwind CSS v4 alpha and the provided Vite plugin:
bash
npm install tailwindcss@next @tailwindcss/vite@next
  1. Add @import "tailwindcss"; to your main CSS file:
css
/* assets/main.css  */
@import 'tailwindcss';
  1. Add the plugin to your nuxt.config.ts file:
ts
// nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  css: ['~/assets/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
})

Conclusion ​

That's it. We now have Tailwind CSS v4 alpha setup and running within our Nuxt application.

Vite and it's plugin ecosystem allows the setup to be quick and simple.

Enjoy!

Resources ​