Setting up Tailwind, the easy way

In the root of your ember app, follow these steps

1. add tailwindcss to your devDependencies
2. make a config/tailwind folder
3. copy these files to a your config/tailwind folder.
4. add <link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css"> in your app/index.html
5. add <link rel="stylesheet" href="{{rootURL}}assets/tailwind.css"> in your tests/index.html

6. add two package.json scripts:
   

   "tailwind:build":
     "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css",
   "tailwind:watch": 
     "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css --watch"
   

7. change your build script
   

   "build": "npm run tailwind:build && ember build --environment=production"
   

8. add public/assets/tailwind.css to your .gitignore file.

🥳 You did it! you're done now!

When you run your app (or build it), you'll run tailwind:build or `tailwind:watch' along with your app

---

or, if you have node 18+, you can automate all this with npx ember-apply tailwind

Note that this is an automation of what the Tailwind CLI documentation guides you through (and what the above 6 steps have you do as well)

Comments

[Michal Bryxí]

Personally I'd recommend going with the ember-apply way as it is less likely to go stale and it's less thinking in general :)