[Bug] `unknown word` error with tailwindcss

[johnpangalos]

Error when trying to use tailwind with postcss plugin

Getting unknown word error when trying to use tailwindcss in post css.

ERROR in ./src/stories/page.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--7-2!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/src??ref--12-2!./src/stories/page.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/johnpangalos/repos/vite-project/src/stories/page.css Unknown word

> 1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../node_modules/css-loader/dist/cjs.js??ref--12-1!../../node_modules/postcss-loader/src/index.js??ref--12-2!./page.css");
  3 |

Steps to reproduce the behavior

1. Setup a new react project with storybook
2. Add post css addon
3. Add tailwind according to postcss guide
4. Move to postcss version 8 as described in the readme.
5. Import tailwind directive into a file
6. Run storybook

Expected behavior

Storybook would run with a postcss generated tailwindcss file

Screenshots and/or logs

Repro Repo: https://github.com/JohnPangalos/storybook-tailwind

Environment

• OS: MacOS (aarch64)
• Node.js version: 15.11.0
• NPM version: 7.6.0

[mercs600]

I get the same issue - but it occurs when I want to import tailwind.css in preview.ts file.

I have removed this addon and setup it manually:

webpackFinal: async (config) => {
    config.module.rules.push(  {
        test: /\.(css|postcss)$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              implementation: require('postcss')
            }
          }
        ]
      })
    return config

edit

The same issue occurred when I wanted to add global tailwind.css in .storybook/preview.tsfile:

import "tailwindcss/tailwind.css"
import "../src/styles/core.css"

But I had to changed it to:

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css'
import '!style-loader!css-loader!postcss-loader!../src/styles/core.css'

now it works

@JohnPangalos so I think you can try with that:

import '!style-loader!css-loader!postcss-loader!./page.css';

[davidzzheng]

This issue is due to the version of storybook that you're using. According to #14 , this add-on requires the next version (>= 6.2) of storybook. I have a working template that you can use as a reference: https://github.com/davidzzheng/tailwind-storybook

[johnpangalos]

Oh thanks @davidzzheng would it be possible to add this to the readme? I feel like it might save people some time.

[ashnamuh]

Hello, i have a similar issue. I have to use css-loader and style-loader with @storybook/addon-postcss and tailwindcss. So, i added configurations for that. like the below codes

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.s?css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[local]',
            },
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            implementation: require('postcss')
          }
        },
      ],
    })

    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
        },
      },
    };
  },
};

And Unknown word error occured. I've create a sample repository base on davidzzheng/tailwind-storybook and tried again. That also doesn't work as what i expected.

sample: https://github.com/ashnamuh/tailwind-storybook

Is there any idea to resolve this issue??

[johnpangalos]

@davidzzheng I can confirm that changing to version 6.2 fixed my issue, closing! Thanks for the help.

[sshquack]

This error is back on CRA 5 + SB 6.4 + addon-postcss 2.0 See https://github.com/storybookjs/addon-postcss/issues/33

[tomtomau]

None of the solutions worked for me on SB 6.5, and the requirement to add import '!style-loader!css-loader!postcss-loader! infront of every import was pretty gross imo.

What did work for me was removing all existing CSS rules from the webpack config and then adding in my own. I didn't add the addon-postcss as a plugin either, that wouldn't work for me:

  webpackFinal: (config) => {
    const filterOutCssRule = (rule) => {
      const patterns = [
        /\.css$/i,
        /\.css$/,
      ];

      return patterns.every((p) => {
        return rule.test.toString() !== p.toString();
      });
    };

    config.module = {
      ...(config.module || {}),
      rules: [
        ...(config.module.rules.filter(filterOutCssRule) || []),
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
          ],
        },
      ],
    };

    return config;
  },