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
7m 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! (4 Comments)

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

  1. Commented 8 months ago

    thank you so much for wonderful tutorial!

    I have all changes working as described in tutorial but I dont see vscode code completion suggestions for css classes etc.

    It would be great if you can share information on how to configure vscode to show those autocomplete suggestions.

    1

    Please sign in or sign up for free to reply

    1. Commented 8 months ago

      Thank you for watching!!

      I believe this is the Tailwind CSS IntelliSense extension. It should immediately start working once the extension is installed :)

      1

      Please sign in or sign up for free to reply

  2. Commented 1 month ago

    You can also set your postcss directly in package.json and avoid imports or extra files altogether.

    {
      "postcss": {
        "plugins": {
          "postcss-import": {},
          "tailwindcss/nesting": {},
          "tailwindcss": {
            "config": "./tailwind.config.js"
          },
          "autoprefixer": {}
        }
      },
    }
    Copied!

    As you can see here I also use Tailwind's nesting and postcss-import (yes order does matter)

    Cheers

    1

    Please sign in or sign up for free to reply

    1. Commented 28 days ago

      That's awesome! Thank you for sharing, secondman!! 😁

      0

      Please sign in or sign up for free to reply