{"id":13480996,"url":"https://github.com/raytiley/tailwind-ember-example","last_synced_at":"2025-06-27T20:37:39.421Z","repository":{"id":54225595,"uuid":"314900539","full_name":"raytiley/tailwind-ember-example","owner":"raytiley","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-02T13:34:52.000Z","size":227,"stargazers_count":23,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-23T14:12:11.094Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raytiley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-21T20:47:06.000Z","updated_at":"2022-10-17T09:38:40.000Z","dependencies_parsed_at":"2022-08-13T09:40:16.431Z","dependency_job_id":null,"html_url":"https://github.com/raytiley/tailwind-ember-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raytiley%2Ftailwind-ember-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raytiley%2Ftailwind-ember-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raytiley%2Ftailwind-ember-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raytiley%2Ftailwind-ember-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raytiley","download_url":"https://codeload.github.com/raytiley/tailwind-ember-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250447989,"owners_count":21432164,"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-07-31T17:00:47.457Z","updated_at":"2025-04-23T14:12:43.124Z","avatar_url":"https://github.com/raytiley.png","language":"JavaScript","funding_links":[],"categories":["Learning"],"sub_categories":[],"readme":"# tailwind-example\n\nAll the examples I found just after Tailwind 2.0s release cover getting Tailwind 1.x into an Ember app. The setup is just slightly different, enough to give some weird errors. For someone not very familiar with `PostCSS` it was confusing. I put this example repository together to figure out a minimal working example. Hope it helps someone else.\n\n## Step 1 - Installing Dependencies\n\nIf you are already using `ember-cli-postcss` make sure to update to latest `v7` version. Tailwind 2.x switches to `PostCSS v8`. See the `ember-cli-postcss` README for specifics of ther version: (https://github.com/jeffjewiss/ember-cli-postcss)\n\n```\nember install ember-cli-postcss\nnpm install --save-dev tailwindcss autoprefixer\n```\n\n## Step 2 - Create a tailwind config file\n\n`npx tailwindcss init config/tailwindcss-config.js --full `\n\n## Step 3 - Configure `ember-cli-build.js`\n\nThis is the part that's a big different. The configuration used to take an array of modules, and the tailwind plugin was passed the location of the config by calling the module. \n\nWith tailwind 2.0, ember-cli-postcss v7, and PostCSS v8 the configuration excepts an array of objects each containing a `module` and an `options` property.\n\n```\n/* ember-cli-build.js */\n\n'use strict';\n\nconst EmberApp = require('ember-cli/lib/broccoli/ember-app');\nconst autoprefixer = require('autoprefixer');\nconst tailwind = require('tailwindcss');\n\nmodule.exports = function(defaults) {\n  let app = new EmberApp(defaults, {\n    postcssOptions: {\n      compile: {\n        plugins: [\n          {\n            module: autoprefixer,\n            options: {}\n          },\n          {\n            module: tailwind,\n            options: {\n              config: './config/tailwindcss-config.js'\n            }\n          }\n        ],\n      }\n    }\n  });\n\n  return app.toTree();\n};\n```\n\n## Step 4 - Import Tailwind in app.css\n\n```\n// app/stytles/app.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n## Step 5 - Replace application.hbs with tailwind css\n\n```\n{{!-- app/templates/application.hbs --}}\n\u003cdiv class=\"container mx-auto\"\u003e\n  \u003ch1 class=\"font-mono text-blue-500\"\u003eHello Tailwind\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n## Step 6 (Optional) - Modify tailwind config to purge unused css\n\nThanks to @kamal on twitter who pointed out that Tailwind now ships with a purge option. Make the following changes to the `tailwindcss-config.js` to scan the `index.html` and `hbs` template files for css classes. This will greatly reduce the size of the css shipped to the browser. In this sample app the css file went from 2.73MB in development to 2.75 KB when purged.\n\nSee (https://tailwindcss.com/docs/optimizing-for-production) for more information about the purge option. Note that tailwind will only purge when `NODE_ENV=production`. `ember-cli` doesn't set the NODE_ENV to production by default, to get a purged build I ran the following command:\n\n`NODE_ENV=production ember build --prod`\n\n```\n/* config/tailwindcss-config.js */\n const colors = require('tailwindcss/colors')\n \n module.exports = {\n-  purge: [],\n+  purge: [\n+    './app/**/*.html',\n+    './app/**/*.hbs',\n+  ],\n   presets: [],\n   darkMode: false, // or 'media' or 'class'\n   theme: {\n```\n\n# TODO\n\nModifying the `tailwindcss-config.js` doesn't regenerate the css, which is kinda a pain when trying to tweak your config. You need to stop / start `ember s` to pickup the changes. If anyone knows how to resolve that please open a PR :)\n\n# Thanks\nThanks to the awesome develepors that build all the tools that make this all possible.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraytiley%2Ftailwind-ember-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraytiley%2Ftailwind-ember-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraytiley%2Ftailwind-ember-example/lists"}