dev-resources.site
for different kinds of informations.
Setting up Tailwind, the easy way
Published at
10/24/2023
Categories
ember
javascript
tailwindcss
Author
nullvoxpopuli
Author
13 person written this
nullvoxpopuli
open
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)
ember Article's
30 articles in total
Ember.js in 60 Seconds
read article
Intro to Ember.js Components
read article
The Top 7 Reasons You Should NOT Use Ember.js on Your Next Project
read article
why don't we have a slack channel?
read article
Installing EmberJS v2 addons from GitHub forks using PNPM
read article
Add custom layer to embe-leaflet
read article
Why Ember Wins My Heart Over React β€οΈ And Maybe Yours Too!
read article
Migrate from ember-cli-deploy-sentry to sentry-cli
read article
ERR_PNPM_BAD_PM_VERSION This project is configured to use vX of pnpm. Your current pnpm is vY
read article
Fixing Package Dependencies
read article
React inside Ember - The Second Chapter
read article
π Rendering Dynamic Components in Ember.js with Embroider
read article
How to use the new Ember theme for QUnit
read article
Effects in Ember
read article
unsupported ambiguity between helper and component
read article
12 common Ember errors to know: A definitive guide on handling EmberJS errors
read article
Demystifying Ember.js Development: How to Hire the Right Developer for YourΒ Project
read article
Is Angular.js or Ember.js the better choice for JavaScript frameworks?
read article
Integrations Series: Authentication And Connection
read article
Support for in/inter page linking / scrolling in EmberJS
read article
Ember-cli config
read article
GraphQL in Your Ember App with Glimmer Apollo
read article
Setting up Tailwind, the easy way
currently reading
Context leaking in EmberJS tests
read article
What to use instead of `@ember/string`
read article
Ember Language Server in Emacs
read article
Why Ember.js is designed for Enterprise Software Development
read article
Demystifying Ember Serialization: A Comprehensive Guide
read article
ember-cli is stuck on certain version
read article
React micro-frontend in ember app - Part 2
read article
Featured ones: