DEV Community

Cover image for Setting up Tailwind, the easy way
NullVoxPopuli
NullVoxPopuli

Posted on

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)

Top comments (1)

Collapse
 
michalbryxi profile image
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 :)