Styles not applying with TailwindCSS's @apply on vue 3

[jfdelarosa]

Describe the bug
I'm trying to use Vue 3 + Pug + SASS + TailwindCSS, after reading some issues (e.g. #10654), I was able to get everything but Tailwind working correctly. My settings work if you use the TailwindCSS classes, not with @apply (PostCSS).

To Reproduce
Use the settings listed below.

Expected behavior
Tailwind rules should be transformed into css.

Screenshots

Code snippets

.storybook/main.js

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        require.resolve("vue-style-loader"),
        require.resolve("css-loader"),
        require.resolve("sass-loader"),
      ],
      include: path.resolve(__dirname, "../"),
    });

    config.module.rules.push({
      test: /\.pug$/,
      use: [{ loader: "pug-plain-loader" }],
    });

    return config;
  },
};

.storybook/preview.js

import "../src/assets/style.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

package.json

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.2.0-alpha.29",
    "@storybook/addon-essentials": "^6.2.0-alpha.29",
    "@storybook/addon-links": "^6.2.0-alpha.29",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/vue3": "^6.2.0-alpha.29",
    "@vue/cli-plugin-babel": "~4.5.11",
    "@vue/cli-plugin-eslint": "~4.5.11",
    "@vue/cli-plugin-pwa": "~4.5.11",
    "@vue/cli-plugin-router": "~4.5.11",
    "@vue/cli-plugin-unit-jest": "~4.5.11",
    "@vue/cli-plugin-vuex": "~4.5.11",
    "@vue/cli-service": "~4.5.11",
    "autoprefixer": "^10.2.4",
    "core-js": "^3.9.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.6",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "sass-loader": "^10.1.1",
    "tailwindcss": "^2.0.3",
    "vue-loader": "^16.1.2"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
};

System

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.182
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.2.0-alpha.29 => 6.2.0-alpha.29 
    @storybook/addon-essentials: ^6.2.0-alpha.29 => 6.2.0-alpha.29 
    @storybook/addon-links: ^6.2.0-alpha.29 => 6.2.0-alpha.29 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/vue3: ^6.2.0-alpha.29 => 6.2.0-alpha.29 

[phated]

Hey @jfdelarosa - can you explain what @apply is? Is that something that tailwind is supposed to add, or is it some additional plugin that needs to be included into postcss?

[jfdelarosa]

Hey @jfdelarosa - can you explain what @apply is? Is that something that tailwind is supposed to add, or is it some additional plugin that needs to be included into postcss?

It's a feature TailwindCSS implements through PostCSS, to change the way you apply their styles on your project:

... Tailwind adds some new non-standard keywords to CSS (like @tailwind, @apply, theme(), etc.)...
(Source)

Basically these two have the same visual output, but differ in the css output (because second one relies on postcss):

<button class="bg-green-400 text-white ...">Hi</button>
...

<button class="button">Hi</button>

.button{
  @apply bg-green-400 text-white ...;
}

Now that you mention it, I also tried loading Tailwind as a postcss plugin on the main.js file with no success:

addons: [
  "@storybook/addon-links",
  "@storybook/addon-essentials",
  {
    name: "@storybook/addon-postcss",
    options: {
      postcssLoaderOptions: {
        postcssOptions: {
          plugins: [
            require.resolve("tailwindcss")
          ],
        },
        implementation: require("postcss"),
      },
    },
  },
],

[phated]

@jfdelarosa Are you writing these things in .css or .scss files?

[jfdelarosa]

@jfdelarosa Are you writing these things in .css or .scss files?

I was using Vue's SFC with SCSS, using just css works but you loose sass benefits.

Hopefully I found a workaround, theres a postcss plugin called postcss-nested which adds a sass-like syntax, it works like a charm.

Seems like there's something wrong on my storybook's config, which results in postcss not been able to handle both sass and tailwindcss, I think it's actually better to use postcss-nested, because it doesn't make much sense to use two different css preprocessors.

[phated]

The addon-postcss and custom scss stuff aren't meant to work together. They hook different file types. The way vue-loader@next works is described at https://github.com/vuejs/vue-loader/tree/next

Glad you were able to solve your issue by switching to a postcss plugin!

[Jak3b0]

@jfdelarosa Are you writing these things in .css or .scss files?

I was using Vue's SFC with SCSS, using just css works but you loose sass benefits.

Hopefully I found a workaround, theres a postcss plugin called postcss-nested which adds a sass-like syntax, it works like a charm.

Seems like there's something wrong on my storybook's config, which results in postcss not been able to handle both sass and tailwindcss, I think it's actually better to use postcss-nested, because it doesn't make much sense to use two different css preprocessors.

Hi @jfdelarosa,

so you were able to configure Storybook with Vue 3 and TailwindCSS? Do you have the required config files somewhere I can look at? Thank you! :)

[jfdelarosa]

@jfdelarosa Are you writing these things in .css or .scss files?

I was using Vue's SFC with SCSS, using just css works but you loose sass benefits.
Hopefully I found a workaround, theres a postcss plugin called postcss-nested which adds a sass-like syntax, it works like a charm.
Seems like there's something wrong on my storybook's config, which results in postcss not been able to handle both sass and tailwindcss, I think it's actually better to use postcss-nested, because it doesn't make much sense to use two different css preprocessors.

Hi @jfdelarosa,

so you were able to configure Storybook with Vue 3 and TailwindCSS? Do you have the required config files somewhere I can look at? Thank you! :)

Hi! I haven't really tried it again, but if you don't use @apply, you can use the settings from the OP!

[productdevbook]

@jfdelarosa fixed ? can you throw my settings. We couldn't start the tailwinds.

[sandranrivas]

did someone fix this? I'm also trying to use @apply

[Garine519]

Found a fix.

const path = require('path')
module.exports = {
  "stories": [
    "../src/**/**/*.stories.mdx",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    }
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],  <==================
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

[KrizzaB]

I'm using Next.js and adding postcss-loader in the webpack config was the only thing that worked. I had thought that by using storybook's postcss addon, I wouldn't need to add it in webpack anymore but that's not the case. Thanks @Garine519!

[bensoutendijk]

Thanks @Garine519 I never would have figured it out since I am awful with webpack

[salomonsanz]

it didn't work for me...

[elvinasv]

I am using React, Next.js, AntD, Tailwind with the mix of less and scss. The goal was to use Tailwind classes with @apply in .less files for overrides (less is used by AntD), but it was not picking up Tailwind.

Tried many solutions, but simply adding postcss-loader fixed it 🙌 Thanks