In the root of your ember app, follow these steps
- add
tailwindcss
to yourdevDependencies
- make a
config/tailwind
folder - copy these files to a your
config/tailwind
folder. - add
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css">
in your app/index.html - add
<link rel="stylesheet" href="{{rootURL}}assets/tailwind.css">
in your tests/index.html -
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"
-
change your build script
"build": "npm run tailwind:build && ember build --environment=production"
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)
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 :)