{"id":13805808,"url":"https://github.com/embermap/ember-cli-tailwind","last_synced_at":"2025-05-13T21:31:30.178Z","repository":{"id":49034963,"uuid":"119319270","full_name":"embermap/ember-cli-tailwind","owner":"embermap","description":"Adds Tailwind CSS to your app or addon","archived":false,"fork":false,"pushed_at":"2021-06-30T17:00:58.000Z","size":4380,"stargazers_count":99,"open_issues_count":36,"forks_count":33,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T09:46:51.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Perl","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/embermap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-29T02:10:29.000Z","updated_at":"2025-03-17T19:00:18.000Z","dependencies_parsed_at":"2022-09-08T16:41:10.347Z","dependency_job_id":null,"html_url":"https://github.com/embermap/ember-cli-tailwind","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Fember-cli-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Fember-cli-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Fember-cli-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Fember-cli-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/embermap","download_url":"https://codeload.github.com/embermap/ember-cli-tailwind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254021541,"owners_count":22000937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:05.074Z","updated_at":"2025-05-13T21:31:26.915Z","avatar_url":"https://github.com/embermap.png","language":"Perl","readme":"# Ember CLI Tailwind\n\n[![npm version](https://img.shields.io/npm/v/ember-cli-tailwind.svg?style=flat-square)](http://badge.fury.io/js/ember-cli-tailwind)\n[![Build Status](https://img.shields.io/travis/embermap/ember-cli-tailwind/master.svg?style=flat-square)](https://travis-ci.org/embermap/ember-cli-tailwind)\n\n---\n\n**Update: This library is deprecated**\n\nAug 29, 2019\n\nHey everyone! I wanted to write an update for folks using and coming across this library. I've decided to deprecate it.\n\nI built ember-cli-tailwind because I wanted a one-liner to get Tailwind wired up with rebuilds in an Ember app. To do this, I had the addon configure PostCSS behind the scenes, basically so PostCSS was an implementation detail from the perspective of the user.\n\nThis has caused problems over the life of this library, as many people reasonably want to be able to configure PostCSS themselves, for example to add Autoprefixer or PurgeCSS.\n\nAs of today I can't think of a great way to write this addon so that it sets everything up in a way that it's a significant value-add compared with teaching folks how to use ember-cli-postcss to set up Tailwind themselves.\n\nThis addon also scaffolded out the Tailwind config into separate files, which was really a personal preference and a design decision I felt aligned with the Ember community. In v1.0 Tailwind took more responsibility for the config, and now the intended way to use Tailwind is to use an empty config, and only override values as needed. This means relying more on the official Tailwind docs and less on your complete customized set of values. This has several benefits, the main one being that Tailwind has taken more ownership of carefully setting values that work for many situations. In any case, if the larger Tailwind community is using Tailwind in this way, I think it's important for Ember users to be doing the same thing.\n\nIn general, I think it's good for Ember users to move away from needing custom ember-* packages, and instead getting closer to the underlying libraries and referencing their official documentation as fast as possible. Tools like Ember Auto Import allow us to easily do this. That makes libraires like this one less and less of a good idea. The reality is it's not the best use of time and resources to maintain addons like this that are always chasing their underlying libraries. Light wrappers that wire up file system watchers can make sense, but in this case, using ember-cli-postcss and wiring things up should be straightforward enough for most users.\n\n[chrism has put together a great guide on installing Tailwind into an Ember app](https://github.com/chrism/emberjs-tailwind-purgecss). It's a great reference which should help you migrate away from this addon.\n\nHopefully this update brings some clarity! The library has effectively been deprecated for several months as I've not been working on it. Teaching Ember users how to use PostCSS so they have direct control over their Tailwind versions \u0026 other PostCSS plugins is going to be a far more sustainable path going forward.\n\nSam Selikoff\n\nP.S. I made a free video on removing ember-cli-tailwind from EmberMap's codebase: \u003chttps://embermap.com/video/using-postcss-and-tailwind\u003e\n\n---\n\nEmber CLI Tailwind adds [Tailwind CSS](https://tailwindcss.com) to your app or addon. It also lets you configure every aspect of Tailwind that's designed to be configured, from the configuration values driving the utility classes, to defining new utility classes or components.\n\nIt comes with a styleguide route (`/tailwind`) that displays all your configured styles:\n\n![image](https://user-images.githubusercontent.com/2922250/39969009-f0886cf4-56a3-11e8-85a1-15ce38d1f45d.png)\n\n## Installation\n\nInstall the addon with\n\n```sh\nember install ember-cli-tailwind\n```\n\n**Apps**\n\nThe default blueprint will attempt to modify your application's main style file and add an `@import` line to include Tailwind, but if it doesn't, you can add it manually:\n\n```\n# CSS \n@import 'tailwind.css';\n\n# SCSS\n@import 'tailwind';\n\n# Less \n@import (inline) 'tailwind.css';\n```\n\n**Addons**\n\nMake sure `ember-cli-tailwind` is in your addon's `dependencies` (NOT `devDependencies`).\n\n## Usage\n\nOnce installed, all of [Tailwind's classes](https://tailwindcss.com/docs/what-is-tailwind/) should be available to you.\n\nYou can see the default values, and change them, by looking at the generated files under `/app/tailwind`.\n\n**Styleguide**\n\nIf you serve your Ember app and visit `/tailwind`, you should see a styleguide showing a summary of all your configured classes. It will rebuild as you modify Tailwind's default configuration.\n\n**Utilities**\n\nYou can [add new utilities](https://tailwindcss.com/docs/adding-new-utilities) of your own by adding them to files under `/app/tailwind/utilities`. You can either use one file or one per utility.\n\n```\n// app/tailwind/utilities/outline-none.css\n.outline-none {\n  outline: none;\n}\n```\n\nThe file will get automatically added to your build, and in the right order (so it will override other rules as you'd expect).\n\n**Components**\n\nYou can define [Tailwind components](https://tailwindcss.com/docs/extracting-components) by adding files under `app/tailwind/components`.\n\n```css\n// app/tailwind/components/buttons.css\n.btn-blue {\n  @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;\n}\n.btn-blue:hover {\n  @apply .bg-blue-dark;\n}\n```\n\nFiles added here will automatically be added to your build.\n\n**Plugins**\n\nYou can add [Tailwind plugins](https://tailwindcss.com/docs/plugins) by using the `app/tailwind/config/tailwind.js` file, importing your plugin, and adding it to the `plugins` array:\n\n```js\nimport myPlugin from 'some-neat-plugin';\n\n// snip\n\nplugins: [\n  container({\n    // center: true,\n    // padding: '1rem',\n  }),\n  myPlugin(),\n],\n```\n\n## Configuration\n\n**shouldIncludeStyleguide**\n\nEmber CLI Tailwind ships with a styleguide that can be added to the host application's router at the `/tailwind` URL.\n\nThe config option `ENV['ember-cli-tailwind'].shouldIncludeStyleguide` determines whether this styleguide is included. By default, it is `false` in the `production` environment, and `true` otherwise.\n\nYou can overwrite it to change this default behavior.\n\n## Advanced addon usage\n\n### `build-tailwind` and the `shouldBuildTailwind` option\n\nEmber CLI Tailwind comes with a function you can use when you want more control over how to work with the built `tailwind.css` file.\n\nThe function is in the `lib` directory and can be `require`'d in node:\n\n```js\nconst buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');\n```\n\nTo use the function, pass in your addon instance (usually `this` if you're working in a hook in `index.js`):\n\n```js\nlet tailwind = buildTailwind(this);\n```\n\nThe return value is a Broccoli tree, and thus can be used in different `treeFor` hooks to end up in your build.\n\nIf you're using this, you probably also want to disable Ember CLI Tailwind's default behavior, which will concat the built `tailwind.css` file into your addon's generated `vendor.css` file – otherwise you could end up with two versions of Tailwind in your CSS.\n\nYou can do that using the `shouldBuildTailwind` config option:\n\n```js\n// index.js\nmodule.exports = {\n  name: 'your-addon',\n  \n  options: {\n    'ember-cli-tailwind': {\n      shouldBuildTailwind: false\n    }\n  }\n}\n```\n\nNow you are responsible for calling `buildTailwind` and ensuring the resulting tree ends up in your output.\n\nAs an example of how you might use this, say you're building a UI component library as an Ember Addon. You want your component library to use Ember CLI Tailwind, but you're using Sass, and you'd like to explicitly `@import` the built `tailwind.css` file in your component library so that you can write other CSS classes that `@extend` Tailwind's classes.\n\nHere's what that would look like:\n\n```js\n// index.js\nconst MergeTrees = require('broccoli-merge-trees');\nconst buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');\n\nmodule.exports = {\n  name: 'your-addon',\n  \n  config() {\n    return {\n      'ember-cli-tailwind': {\n        shouldBuildTailwind: false\n      }\n    };\n  },\n\n  treeForAddonStyles(tree) {\n    let trees = tree ? [ tree ] : [];\n  \n    trees.push(buildTailwind(this));\n  \n    return new MergeTrees(trees);\n  }\n};\n```\n\nNow that the built `tailwind.css` file is in your Addon's style tree, you can import it in other Sass files:\n\n```scss\n// addon/styles/addon.scss\n@import 'tailwind';\n\nbody {\n  @extend .antialiased;\n  @extend .font-sans;\n  @extend .text-grey-darkest;\n}\n```\n\nYou could even use Sass variables inside of Tailwind's config, since you can set those variables before `@import`'ing Tailwind:\n\n```js\n// tailwind/config/colors.js\n\nexport default {\n  brand: '$brand'\n}\n```\n\n```scss\n$brand: '#3490DC';\n@import 'tailwind';\n```\n","funding_links":[],"categories":["Packages","Addons / Support"],"sub_categories":["Styling kits","Awesome Addons"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermap%2Fember-cli-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fembermap%2Fember-cli-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermap%2Fember-cli-tailwind/lists"}