Vague read me

[Jared Christensen]

I'm not sure what this does or how to use it based on the Reed me.

[Shaun Evening]

Hey @jared-christensen 👋

Apologies for the lack of detail. This is on my list of improvements for the coming week. If you have any questions in the mean time please ask here and i'll help you out as well as add it to the README

[Jared Christensen]

Hey, appreciate the prompt reply! I've noticed that Storybook seems to automatically detect Tailwind on my setup, which is great. I'm curious though—do I actually need this package? I stumbled upon a tutorial that mentioned it, but I'm not clear on its purpose. Also, I'm interested in having a separate Tailwind config for Storybook. Does this package help with that?

[Yehuda Ringler]

I got it working with help from the migration guide. The auto configure didn't work. Maybe because I have a main.ts in typescript? Or mix of css and scss? IDK.

I had previously been using

		{
			name: "@storybook/addon-styling",
			options: {
				sass: {
					implementation: require("sass")
				}
			}
		},

And after trial and error, am now using

		{
			name: '@storybook/addon-styling-webpack',
			options: {
				rules: [
					{
						test: /\.s?css$/,
						use: [
							'style-loader',
							'css-loader',
							{
								loader: 'sass-loader',
								options: {
									implementation: require.resolve('sass'),
								},
							},
						],
					},
				],
			},
		},

I have some .css also, hence the question mark in the regex.

[Martin]

Trying to understand how the depreciation of the previous package would affect if the project that I am using is running on Vite. I am using the @storybook/addon-styling for tailwinds postcss processing so it feels like a pretty common use case and with the depreciation and migration I am trying to understand how it would fit.

[Shaun Evening]

Hey @MartinPlayon 👋
If you're using Vite, addon-styling wont help you because vite already comes preconfigured to work with postcss out of the box. However, if you were using the theme switcher for tailwind dark mode, you can use @storybook/addon-themes

[Shaun Evening]

Hey @jared-christensen 👋

I'm sorry that I took so long to get around to this. I've updated the README with manual configuration instructions to give a better sense of how this addon works.

Please let me know if this helps solve your problem. If not let me know what else I could add to make the documentation more useful.

[Yuriy Yarosh]

@jared-christensen @integrayshaun
it's probably puzzling for newcomers to get that it should be a part of addons, and you have to use absolutePath's for monorepo's.

import path from 'node:path';

const getAbsolutePath = (name) => path.dirname(require.resolve(path.join(name, "package.json")))

const config = {
  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-themes"),
    {
      name: getAbsolutePath('@storybook/addon-styling-webpack'),
      options: {
        rules: [
          // Replaces existing CSS rules to support PostCSS
          {
            test: /\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: { importLoaders: 1 }
              },
              {
                // Gets options from `postcss.config.js` in your project root
                loader: 'postcss-loader',
                options: { implementation: require.resolve('postcss') }
              }
            ],
          }
        ]
      }
    }
  ],
}

[Shaun Evening]

@yuriy-yarosh I could add a link to the SB monorepo docs. Would that help? I don't want to make the README too overwhelming with more complex setups.

[Yuriy Yarosh]

@integrayshaun any reference to a ready to use and working SB config would be helpful.

[Shaun Evening]

Are you looking for a link to a monorepo example @yuriy-yarosh?

I have a basic tailwind example that I could look at turning into a mono repo
https://stackblitz.com/edit/github-5njuww?file=.storybook%2Fmain.ts

[Yuriy Yarosh]

@integrayshaun no, not really.
I'm asking to add some into the readme.

[Shaun Evening]

@yuriy-yarosh right, would the example I linked above be a good enough example to add into the README?

[Yuriy Yarosh]

@integrayshaun yes.

[Muh Ghazali Akbar]

const getAbsolutePath = (name) => path.dirname(require.resolve(path.join(name, "package.json")))

This config is working! Thank you!