Setting Up Tailwind CSS

In this lesson, we'll learn how to install and configure PostCSS and Tailwind CSS within our AdonisJS 6 project using Vite.

Published
Jan 24
Duration
9m 5s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Hey there! 👋

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!

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!