Skip to content

Instantly share code, notes, and snippets.

@Adan099
Forked from Robert-96/README.md
Created October 2, 2023 07:29
Show Gist options
  • Select an option

  • Save Adan099/26effc1a5e31f1867c1cf97a89192d44 to your computer and use it in GitHub Desktop.

Select an option

Save Adan099/26effc1a5e31f1867c1cf97a89192d44 to your computer and use it in GitHub Desktop.
Ember.Js: Installing Tailwind CSS

Ember.Js: Installing Tailwind CSS

TL;DR

$ ember install ember-cli-postcss                   # Install ember-cli-postcss
$ npm install --save-dev tailwindcss                # Install tailwindcss


$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;
// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });
  
  // ...
};

Installing ember-cli-postcss

$ ember install ember-cli-postcss

For more about ember-cli-postcss check out the documentation.

Install Tailwind

# Using npm
$ npm install --save-dev tailwindcss

# Using Yarn
$ yarn add --dev tailwindcss

Add Tailwind to your CSS

/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Create your Tailwind config file (optional)

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.

$ npx tailwind init app/styles/tailwind.config.js

For more about the Tailwind Configuration check out the documentation.

Process your CSS with Tailwind using ember-cli-postcss

You'll want to add Tailwind as a PostCSS plugin in your build chain.

This means adding tailwindcss to the list of plugins you pass to ember-cli-postcss in your ember-cli-build.js.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });
  
  // ...
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment