Storybook: Use Tailwindcss and css modules with Storybook

[ericnguyen23]

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(R) Core(TM) 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!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Hannah-goodridge]

I too would like support on this!

[rbutera]

I too would like support on this!

@Hannah-goodridge have you seen the tutorial I wrote on this topic (https://medium.com/@rbutera/jamstack-tutorial-part-1-gatsbyjs-with-storybook-tailwindcss-and-typescript-setup-bd28855db897) and the repo I shared above? I think it will help you solve your problem. Feedback would be appreciated on how I could improve it or why it doesn’t help you 😀

[Hannah-goodridge]

I too would like support on this!

@Hannah-goodridge have you seen the tutorial I wrote on this topic (https://medium.com/@rbutera/jamstack-tutorial-part-1-gatsbyjs-with-storybook-tailwindcss-and-typescript-setup-bd28855db897) and the repo I shared above? I think it will help you solve your problem. Feedback would be appreciated on how I could improve it or why it doesn’t help you 😀

I've raised an issue in your repo about the missing webpack config, which was what I needed to check my own configuration.

[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.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!