Use Tailwindcss and css modules with Storybook

Describe the bug I have a Gatsby project that uses Tailwindcss and css modules. I would like to somehow configure Storybook to use both. So far I’ve been able to use one or the other but not both.

Code snippets Here’s my webpack.config.js file for working css module:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]",
            },
          },
          require.resolve("sass-loader"),
        ],
      },
    ],
  },
}

Here’s my webpack.config.js file for working Tailwindcss:

const path = require("path")

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.css$/,
    use: [
      // Loader for webpack to process CSS with PostCSS
      {
        loader: "postcss-loader",

        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: "[name]__[local]___[hash:base64:5]",
          /*Enable Source Maps*/
          sourceMap: true,
          /*Set postcss.config.js config path && ctx*/
          config: {
            path: "./.storybook/",
          },
        },
      },
    ],

    include: path.resolve(__dirname, "../"),
  })

  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve("babel-loader")

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env"),
  ]

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve("@babel/plugin-proposal-class-properties"),
    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve("babel-plugin-remove-graphql-queries"),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ["browser", "module", "main"]

  return config
}

System: System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel® Core™ i7-7920HQ CPU @ 3.10GHz Binaries: Node: 10.15.3 - /usr/local/bin/node npm: 6.14.2 - /usr/local/bin/npm Browsers: Firefox: 67.0.4 Safari: 13.1 npmPackages: @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-backgrounds: ^5.3.18 => 5.3.18 @storybook/addon-knobs: ^5.3.18 => 5.3.18 @storybook/addon-links: ^5.3.18 => 5.3.18 @storybook/addons: ^5.3.18 => 5.3.18 @storybook/react: ^5.3.18 => 5.3.18 npmGlobalPackages: @storybook/cli: 5.3.18

[rbutera]

please check this gatsby-js tailwind starter:

https://github.com/rbutera/greater-gatsby

please remember to star if you find this useful!

[Hannah-goodridge]

UPDATE: For anyone reading, I would recommend taking a look at @rbuteras repo, it helped solve a few issues I was having by pushing a fix.

The main issue I was having was that in my package.json scripts I was passing:

"storybook": "NODE_ENV=production start-storybook -s public -p 6006",
"build-storybook": "NODE_ENV=production build-storybook -s public",

and once I remove the NODE_ENV=production from both scripts my css would then import into storybook.