Documentation needed for integration of Storybook + SvelteKit + Tailwind

[unknownterritory]

Is your feature request related to a problem? Please describe
A lot has improved about the way Storybook recognizes the context in which it is being installed and then installs itself. However, not only a new version of Svelte is out (with which Storybook doesn't work out of the box) but integrating Tailwind keeps being cumbersome and needing a lot of research and trial and error.

According to The State of CSS 2019 and 2010, Tailwind is the most used CSS framework. Components that are styled with Tailwind need consequently to be shown in Storybook with the same styles. Having documentation that enabled integrating these three technologies without too much trouble would be extremely appreciated.

Describe the solution you'd like
I would like to see:

• the Storybook installation script fixed for SvelteKit
• documentation about integration with Tailwind in place or even an addon to implement this integration easily

Are you able to assist to bring the feature to reality?
Possibly, with documentation. In Additional context I report on the solution I've implemented so far, just as a temporary workaround.

Additional context
Currently, the following seem to be the necessary steps to get these three technologies to play well together:

1. Install a clean new SvelteKit app: npm init svelte@next followed by npm i
   ✔ Which Svelte app template? › SvelteKit demo app
   ✔ Use TypeScript? … No
   ✔ Add ESLint for code linting? … Yes
   ✔ Add Prettier for code formatting? › Yes
2. Install Storybook: npx sb@next init. npx sb init yelds similar results.
3. Run Storybook: npm run storybook. This fails with ESM errors.
4. Change the extensions of both .storybook/main.js and .storybook/preview.js to .cjs.
5. Comment out "preprocess": require("../svelte.config.js").preprocess within svelteOptions. This and the previous step are documented as a workaround in Storybook cannot be built on packages using "type": "module" #11587.
6. Add PostCSS to Svelte using the [Svelte corresponding adder](npx svelte-add postcss): npx svelte-add postcss followed by npm i.
7. Add Tailwind CSS to Svelte using the Svelte corresponding adder: npx svelte-add tailwindcss followed by npm i. JIT is still misbehaving so I would recommend avoiding using it while developing.
8. At this point Tailwind doesn't get fully integrated with SvelteKit. Tailwind styles need to be added to the apps. Add

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   to src/app.css. There's a fix in progress for it, discussion at issue #42
9. At this point Tailwind styles can be used within Svelte but Storybook is still unaware of them. In order to make it aware first import the application styles to .storybook/preview.cjs:

   import '../src/app.css';

10. Also change .storybook/main.js according to the following example:

     const path = require('path');
    
     module.exports = {
    	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    	addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
    	svelteOptions: {
    		// "preprocess": require("../svelte.config.js").preprocess
    	},
    	webpackFinal: async (config) => {
    		// Remove the existing css rule
    		config.module.rules = config.module.rules.filter((f) => f.test.toString() !== '/\\.css$/');
    
    		config.module.rules.push({
    			rules: [
    				{
    					test: /\.css$/i,
    					use: ['style-loader', 'css-loader', 'postcss-loader']
    				}
    			],
    			include: path.resolve(__dirname, '../src')
    		});
    
    		return config;
    	}
    };

[madeleineostoja]

What about Sveltekit aliased imports, like $app/env etc? They don't seem to work for me in storybook, and I'm not sure what I need to do to get Webpack to respect them

[michaelwooley]

Curiously, the latest version appears to change the name of app.css to app.postcss. I found I needed to change the name back to app.css to get things working.

[Pitasi]

What about Sveltekit aliased imports, like $app/env etc? They don't seem to work for me in storybook, and I'm not sure what I need to do to get Webpack to respect them

I got it compile/bundle with this main.csj:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf"
  ],
  "svelteOptions": {
    // https://github.com/storybookjs/storybook/issues/11587
    // "preprocess": require("../svelte.config.js").preprocess
  },
  webpackFinal: async (config) => {
    config.resolve = {
      alias: {
        '$app': path.resolve(__dirname, '../node_modules/@sveltejs/kit/assets/runtime/app'),
      },
    };

    const svelteLoader = config.module.rules.find(
      (r) => r.loader && r.loader.includes("svelte-loader"),
    );
    svelteLoader.options.preprocess = require("svelte-preprocess")({});

    return config;
  }
}

storybook starts, but when I open the story of my component I get a TypeError: Cannot read property 'page' of undefined triggered by import { page } from '$app/stores';.

It's not big deal for me though, I'll try to separate pure UI components from components/wrappers that actually depends on svelte kit

[madeleineostoja]

Just FYI Sveltekit runtime modules are fixed if you use the Vite storybook builder, they won't work with webpack

[lirbank]

Not sure if this is related but I found a solution to getting Tailwind JIT work with Storybook hot reload (dev mode), posted here: tailwindlabs/tailwindcss#6570 (comment)

[benmccann]

@sveltejs/kit/experimental/vite has been released in @sveltejs/kit version 1.0.0-next.353 in part to provide improved Storybook support. Feedback welcome in sveltejs/kit#5184