Tailwind CSS v3 has been released and there is a bunch of cool new features available (I'm mostly interested in the "just in time" engine being standard now). The standard setup for an ember project has changed a little and there doesn't seem to be a lot of good resources available for this setup.
Create a new ember project.
npx ember-cli new tailwindcss-demo --no-welcome
cd tailwindcss-demo
Install tailwind and related packages.
npm install tailwindcss autoprefixer --save-dev
# no need for purgecss anymore
Install postcss add on.
ember install ember-cli-postcss
Create tailwind config.
# I create a tailwind dir in styles and add the config file there
# this is a personal organizational choice, the config file could live anywhere
mkdir app/styles/tailwind
# create tailwind config file
# last arg is path to config file
# if no arg is provided it will be created at the root of your project
# this path will be needed when updating ember-cli-build.js
npx tailwind init app/styles/tailwind/config.js
There isn't a purge key in the config file anymore. Update the content key with paths to all template files. The config docs are here
// app/styles/tailwind/config.js
module.exports = {
content: ['./app/**/*.hbs'],
theme: {
extend: {},
},
plugins: [],
}
Update app/styles/app.css
/* app/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Update ember-build-cli.js
// ember-build-cli.js
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');
const tailwind = require('tailwindcss');
module.exports = function (defaults) {
let app = new EmberApp(defaults, {
postcssOptions: {
compile: {
// track changes in template, css, scss, and tailwind config files
cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\/config\.js$/],
plugins: [
{
module: autoprefixer,
options: {},
},
{
module: tailwind,
options: {
config: './app/styles/tailwind/config.js',
},
},
],
},
},
});
return app.toTree();
};
That's it. You should be up and running with Ember and Tailwind now!
Repo for this demo.
Top comments (5)
thank you for this ! helped me get tailwind working in my ember app.
For some reason, it doesn't autogenerate classes.
I.E. If I add a new class that I didn't already used, I have to restart the server to get it generated instead of getting it generated by TW through JIT.
Any idea how to fix that?
I haven't seen that issue. Can you give an example of a class you're adding that isn't being generated?
dev-to-uploads.s3.amazonaws.com/up...
The
PostcssCompilerbuild step should be happening on each build. If you're not seeing that then there might be an issue with how thepostcssOptions.compile.cacheIncludekey is configured.Hi this approach is fine in general. I found the tailwind lsp to have problems with tailwind.config.js files not in the root of the project repo. So I recommend restructuring to this default tailwind config in order to profit from css class completion in VSCode, Webstorm, Sublime or any other Editor that makes use of tailwinds lsp.