Use custom styles for ember-cli-flash

@belgoros wrote:

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.

Posts: 1

Participants: 1

Read full topic