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 !

---

Stack used :

• node : v14.17.0
• npm : 6.14.13

Sources :

• adonisJS doc :

  • activate postCss

• Tailwindcs doc:

  • Install tailwindcss
  • Congfiguration
  • JIT

• PostCss:

  • Site
  • Github repo
  • plugins list

• videos :

  • RomanLanz Twicth explain how to install & config tailwind css (possible 404)
  • Explain postCss from grafikrat (fr)