Tailwindcss with fullstack adonis

How do I setup full-stack Adonis to use tailwind css?

1 Like

I worked it out.

Here are the full instructions

npm i tailwindcss

in the root of your project run

//Creates a tailwind.js file in the root of your project
./node_modules/.bin/tailwind init

Create tailwind.css in /public


 @tailwind preflight;

 @tailwind components;

 @tailwind utilities;

You can then manually compile a css file or add the command to your package.json file.

//Manually configure
./node_modules/.bin/tailwind build ./public/tailwind.css -o ./public/tailwindoutput.css

or add the command to your package.json start command

"scripts": {
    "start": "./node_modules/.bin/tailwind build ./public/tailwind.css -o ./public/tailwindoutput.css && node server.js",
    "test": "node ace test"
  },

in the above example when ever you run npm run start it will first compile tailwind then start your server.

When your done, simply add tailwind.css and tailwindoutput.css into the head of your html layout file.

3 Likes

Please note that with the latest version of tailwind the contents of tailwind.css should now look like this

@tailwind base;

@tailwind components;

@tailwind utilities;
1 Like