Postcss-import problem with TailwindCSS v1.0

Questions
10

I was pleasantly surprised to see that it even works with the purgecss plugin for postcss:

  1. yarn add --dev ember-cli-postcss tailwindcss @fullhuman/postcss-purgecss

  2. Edit ember-cli-build.js:

     'use strict';

 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const { join } = require('path');

 module.exports = function(defaults) {
   let app = new EmberApp(defaults, {
     postcssOptions: {
       compile: {
         plugins: [
           require('tailwindcss'),
           require('@fullhuman/postcss-purgecss')({
             content: [
               join(__dirname, 'app', 'index.html'),
               join(__dirname, 'app', 'templates', '**', '*.hbs'),
             ],
             defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
           })
         ]
       }
     }
   });
   return app.toTree();
 };

  3. Edit app.css:

    @tailwind base;
@tailwind components;
@tailwind utilities;

With this it’s detecting all the tailwind classes I use in templates and in index.html, and stripping out everything else.

I haven’t gone deep into any of the tailwind customization features, but the basics seem to all be OK.

3 Likes