Setting Up Tailwind CSS

⚠️ Quick Note

TailwindCSS released v4 on Jan 22nd, 2025 which contains a few breaking changes to the installation process. For the most up-to-date installation guide. Please refer to the AdonisJS framework guide in the TailwindCSS documentation.

—

Tailwind v3

Since the release of this lesson, we've learned an alternative way we can register our PostCSS plugins within our application. The way shown in our lesson is perfectly valid and works great, however, instead of registering our PostCSS plugins in a separate postcss.config.js file, like the below.

// postcss.config.js

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

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

We can instead define these plugins directly within our vite.config.js, which allows us to eliminate one extra file within the root of our project structure.

We can do this using the css configuration option within our Vite configuration and nesting a postcss configuration within it, like below.

// vite.config.js

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: ['resources/js/app.js'],
      reload: ['resources/views/**/*.edge'],
    }),
  ],

  css: { 
    postcss: { 
      plugins: [tailwindcss, autoprefixer] 
    } 
  },
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

As you can see above, we can define our PostCSS configuration directly within our Vite configuration. The only difference is, we'll need to import our plugins directly. Once that's set, we can delete our postcss.config.js file and everything will behave just the same as before!