Les classes CSS Tailwind ne s'affichent pas dans la construction de Storybook

J'essaie de construire mon livre de contes avec tailwind css. Lors de l'exécution build-storybook, les composants sont rendus avec les classes de vent arrière. Malheureusement, lorsque je construis un livre d'histoires et que j'exécute la création storybook-static, npx http-server storybook-staticles classes ne sont pas chargées dans les histoires et les composants sont affichés sans style.

Ceci est un dépôt repro de mon projet :
https://gitlab.com/ens.evelyn.development/storybook-issue

C'est mon main.js:

 const path = require('path')
module.exports = {
 "stories": [
 "../src/components/**/**/*.stories.mdx",
 "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
 ],
 "addons": [
 "@storybook/addon-links",
 "@storybook/addon-essentials",
 {
 name: '@storybook/addon-postcss',
 options: {
 postcssLoaderOptions: {
 implementation: require('postcss'),
 },
 },
 }, 
 "@storybook/addon-actions",
 "storybook-tailwind-dark-mode"
 ]}

Ma structure de projet ressemble à ceci :

.storybook 
src
 components 
 subdir
 Button
 index.tsx
 button.stories.js 
 styles
 index.css (<-- tailwindcss file)

Tous les indices ou conseils sont très appréciés.

Solution du problème

Les solutions ci-dessus ne fonctionneront pas pour la version Tailwind> 3.0 en raison du compilateur JIT.

Solution 1: Solution facile

dans .storybook/preview.jsle fichier, ajoutez cette ligne pour compiler les fichiers CSS générés par Tailwind comme celui-ci -

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

Voici tailwindcss/tailwind.cssle fichier CSS Tailwind. Écoutez, ce qui est important, c'est que je dois ajouter !postcss-loader!pour compiler le CSS généré par Tailwind.

Vous pouvez également ajouter votre fichier scss personnalisé comme celui-ci, le cas échéant -

import '!style-loader!css-loader!sass-loader!../src/scss/style.scss';

Voici ../src/scss/style.scssun fichier scss personnalisé.

Pour la plupart des gens, cela fonctionnera dans la version Tailwind> 3.0 sans aucun problème.

Solution 2: une sorte de solution de piratage

Créer un élément de style personnalisé dans la page d'aperçu

import tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';
const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = tailwindCss;
document.body.appendChild(storybookStyles);

J'espère que cela aidera les nouveaux utilisateurs de Tailwind qui travaillent dans Tailwind supérieur à v3.0.