[Bug] [PostCSS 8] Tailwind apply not working in imported css files

[johanvanhelden]

Describe the bug

In my main css files I am importing several other css files to keep things clean and organized.
However, in Storybook, these imported files are not processed and the Tailwind @apply logic is not ... "applied".

Steps to reproduce the behavior

1. Clone the following repo: https://github.com/davidzzheng/breeze
2. Create a custom.css file in the ./src/styles folder
3. Add the following CSS:

.custom {
    @apply text-5xl;
}

4. Open the ./src/stories/Playground.stories.tsx story and add the custom class to the div so it will look like this:

export default {
  title: "Playground",
};

const Template = () => (
  <div className="bg-gradient-to-r from-red-100 to-blue-800 custom">Hello World</div>
);

export const Base = Template.bind({});

5. Add the import to the ./src/styles/taildwind.css file:

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

@layer components {
    @import './custom.css';
}

6. npm run storybook
7. See that the "Hello world" text inside the Playground story is not the size that text-5xl should be.
8. To ensure the import is working, manually add font-size: 33px and you will see that the text is huge. So the import is fine.
9. To ensure Tailwind works, place the custom css with the apply right inside the main tailwind.css and notice it also works!

So it only seems a problem inside included css files.

If I compile the css using Laravel Mix it does properly parse and @apply the css. So it really seems to be a Storybook issue.

Expected behavior

The proper css should be @apply'd in included css files.

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Binaries:
    Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
  npmPackages:
    @storybook/addon-essentials: ^6.2.7 => 6.2.7
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/builder-webpack5: ^6.2.7 => 6.2.7
    @storybook/vue: ^6.2.7 => 6.2.7

[d8vjork]

Also cannot get Tailwind 2.1+ working with this as our project also requires PostCSS 8

We wanted to move to Vue 3 with Storybook but that is actually impossible

Edit: Related to #19

[blowsie]

I can confirm I also have this issue, using tailwind 1.9.6 and postcss 7

[blowsie]

I think this is because of
#10
&
#14

[johanvanhelden]

Maybe a stupid question, but what is CRA (as mentioned in #14)? Because I am using Storybook 6.2. So that should not be an issue.

[blowsie]

CreateReactApp I assume

[johanvanhelden]

Hmm, ok. I am using Vue, so I don't that is not really applicable here.

[Nexum]

I can't seem to figure this out, any idea why this happens?

[Joralf]

Any update on PR #19 in relation to this bug?

[blowsie]

@Nexum its detailed in #14 i think

Before Storybook 6.2, it used to install additional loaders on .css and that causes this to crash. In the same way, CRA already had postcss and other loaders on the .css extension that crash this.

[charkour]

I am experiencing this as well with tailwind 2.2.2 and posts 8.3.5

[larswaccen]

I am having the same issue with postcss7 compat. Tailwind works, but not @apply with vue component styles.

info => Using PostCSS preset with postcss@7.0.39 info => Using default Webpack4 setup

... then;

ERROR in ./src/components/N... You may need an additional loader to handle the result of these loaders.

> .nav-icon { | @apply h-6 w-6 text-green mr-2; | }

this is in vue3 with <style scoped lang="postcss" />

[blowsie]

I still get this issue in latest storybook, postcss, and tailwind.

package json

    "@antfu/eslint-config": "^0.20.2",
    "@babel/core": "^7.17.9",
    "@etchteam/storybook-addon-status": "^4.2.0",
    "@iconify-json/carbon": "^1.1.3",
    "@storybook/addon-a11y": "^6.5.0-alpha.54",
    "@storybook/addon-actions": "^6.5.0-alpha.54",
    "@storybook/addon-essentials": "^6.5.0-alpha.54",
    "@storybook/addon-links": "^6.5.0-alpha.54",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addons": "^6.5.0-alpha.54",
    "@storybook/csf-tools": "^6.5.0-alpha.54",
    "@storybook/theming": "^6.5.0-alpha.54",
    "@storybook/vue3": "^6.5.0-alpha.54",
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "^2.2.4",
    "@vue/test-utils": "^2.0.0-rc.19",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.4",
    "eslint": "^8.13.0",
    "jsdom": "^19.0.0",
    "pnpm": "^6.32.6",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.3",
    "unplugin-auto-import": "^0.7.0",
    "unplugin-vue-components": "^0.19.2",
    "vite": "^2.8.6",
    "vitest": "^0.9.3",
    "vue-loader": "^17.0.0",
    "vue-tsc": "^0.34.5"

postcss.config.js

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    'tailwindcss': {},
    'autoprefixer': {},
  },
}

.storybook/main.js

module.exports = {
  'stories': [
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
  ],
  'addons': [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-notes',
    '@etchteam/storybook-addon-status',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions: {
            plugins: [
              require('tailwindcss/nesting')(),
              require('tailwindcss')(),
              require('autoprefixer')(),
            ],
          },
        },
      },
    },
  ],
  'framework': '@storybook/vue3',
}

[damianobarbati]

Did anybody solve this? Any chance to have the @apply directive work in .css imports?

[ssssct]

Did anybody solve this? Any chance to have the @apply directive work in .css imports?

[nvuhung]

I use storybook latest version and @storybook/addon-styling version 0.3.1, but still cannot use import in @layer tailwind.