/adonis-with-tailwindcss

Install tailwindcss with adonisJS 5

Primary LanguageTypeScript

adonis-with-tailwindcss

Install tailwindcss with adonisJS 5

1. Install tailwindcss, postCss & autoprefixer

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Initialize tailwindcss config file

npx tailwindcss init

3. Create postcss.config.js file, with configs

const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ]
}

4. Enable support postCSS in webpack config (webpack.config.js)

Encore.enablePostCssLoader()

5. Install postcss-loader

npm install -D postcss-loader

6. execute adonis serve to compile (in watch mode)

node ace serve -w

7. Tailwindcs is installed & compil in apps.css, Let's working !

app.css


Stack used :

  • node : v14.17.0
  • npm : 6.14.13

Sources :