DEV Community

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

Posted on

7 1 2

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)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

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 :)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs