Use custom styles for ember-cli-flash

Design
1

I recently used Bootstrap and ember-cli-flash and would like to change for Tailwindcss. Has anybody already tried to use a custom component as explained in the ember-cli-flash docs or proceeded in another way? I’m a little bit lost - how to integrate the existing custom styles in an Ember app? I tried to follow this article, but without success, - I’m getting the below error:

Build Error (PostcssCompiler)

Failed to find 'tailwindcss/base'
  in [
    /var/folders/lv/b5jy1vv56lg19tcr5vd8rs880000gp/T/broccoli-48277dCBZNw04ZvIt/out-443-broccoli_merge_trees_full_application/app/styles
  ]

I also took a look at the Tailwindcss docs, - it didn’t solve the problem either. Here is what worked without adding custom styles.

# styles/app.css

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

In ember-cli-build.js:

module.exports = function(defaults) {
  let envIsDevelopment = process.env.EMBER_ENV === "development";
  let app = new EmberApp(defaults, {
    hinting: !envIsDevelopment,
    tests: !envIsDevelopment,
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss')
        ]
      }
    }
  });

In the postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

And finally, in the generated tailwind.config.js:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

The above settings worked and the Tailwindcss styles were aplied.

Then I added postcss-import dependency and updated the above files as follows:

# styles/ap/css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

and postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

In this case, there are no Tailwindcss styles at all:

GET /assets/tailwindcss/components 404 64.803 ms - -
GET /assets/tailwindcss/base 404 116.456 ms - -
GET /assets/tailwindcss/utilities 404 117.060 ms - -

If I add require of tailwind module as the article said to ember-cli-build.js:

postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') },
          require('tailwindcss')
        ]
      }
    }

it raises a compilation error at start up (see above).

What’s wrong with that? Thank you.

2

Have you tried doing

{
  module: require('postcss-import'),
  options: {
    path: ['node_modules']
  }
},

with

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

instead of the @tailwind xyz directives?

Check out this repo for a sample setup: GitHub - chrism/emberjs-tailwind-purgecss: A guide to using Tailwind v1.0 and Purge CSS with EmberJS

1 Like
3

Yep, thank you very much, it worked for me. So, the content of my ember-cli-build.js is as follows:

module.exports = function(defaults) {
  let envIsDevelopment = process.env.EMBER_ENV === "development";
  let app = new EmberApp(defaults, {
    hinting: !envIsDevelopment,
    tests: !envIsDevelopment,
    postcssOptions: {
      compile: {
        plugins: [
          { 
            module: require('postcss-import'),
            options: {
              path: ['node_modules']
            }
          },
          
          require('tailwindcss')
        ]
      }
    }
  });

The content of my styles/app.css is as follows:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "flash";
@import "custom";

The custom flash.css and custom.css files are in the same styles directory. Thanks a lot!

1 Like