Been struggling with this problem for hours 🙁
I have a separate project with a component that uses shadcn and tailwind.css. And I want to move this component to another project that uses storybook7 version, and then I will implement other components there. Also this project is monorepo. I have almost everything worked out, but tailwind styles don’t work for all components.
storybook (7 version) details
/apps/design-system/.storybook/main.js
const path = require('path');
module.exports = {
stories: [
'../../../packages/*/src/**/*.stories.@(js|jsx|ts|tsx)',
'../../../apps/*/src/**/*.stories.@(js|jsx|ts|tsx)',
'../../../packages/*/*/**/*.stories.@(js|jsx|ts|tsx)',
],
staticDirs: ['../../../packages/component-library/public'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/preset-scss',
],
framework: '@storybook/react-webpack5',
webpackFinal: async (config) => {
config.module.rules.push({
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
include: path.resolve(__dirname, '../../../packages/component-library/uikit'),
});
config.resolve.alias = {
'@': path.resolve(__dirname, '../../../packages/component-library/uikit'),
'@ui': path.resolve(__dirname, '../../../packages/component-library/uikit/ui'),
'@components': path.resolve(__dirname, '../../../packages/component-library/uikit/components'),
};
return config;
},
};
/apps/design-system/.storybook/preview.js
import 'shared/src/index.css'
import '../../../packages/component-library/uikit/global.css'
/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
tailwind details
/packages/component-library/uikit/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 142 86% 28%;
--primary-foreground: 356 29% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 45%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 142 86% 28%;
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground font-body;
}
h1, h2, h3, h4, h5, h6 {
@apply font-heading;
}
}
/packages/component-library/uikit/postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
/packages/component-library/uikit/tailwind.config.js
/** @type {import('tailwindcss').Config} */
import { fontFamily } from 'tailwindcss/defaultTheme';
import tailwindAnimate from 'tailwindcss-animate';
export default {
content: ['./components/**/*.{js,jsx}', './ui/**/*.{js,jsx}'],
prefix: '',
theme: {
extend: {
fontFamily: {
heading: ['var(--font-heading)', ...fontFamily.sans],
body: ['var(--font-body)', ...fontFamily.sans],
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
},
borderRadius: {
xl: `calc(var(--radius) + 4px)`,
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: `calc(var(--radius) - 4px)`,
},
keyframes: {
'accordion-down': {
from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
},
},
plugins: [tailwindAnimate],
};
But I get an error as a result
Module build failed (from ../../node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
SyntaxError
(2:7) /Users/yurii/projects/datarama_frontend/packages/component-library/uikit/global.css Unknown word
1 |
2 | import API from “!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js”;
| ^
3 | import domAPI from “!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js”;
4 | import insertFn from “!../../../node_modules/style-loader/dist/runtime/insertBySelector.js”;
ERROR in ../../node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[16].use[2]!../../packages/component-library/uikit/global.css
Module build failed (from ../../node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
SyntaxError
(2:7) /Users/yurii/projects/datarama_frontend/packages/component-library/uikit/global.css Unknown word
1 |
2 | import API from “!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js”;
| ^
3 | import domAPI from “!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js”;
4 | import insertFn from “!../../../node_modules/style-loader/dist/runtime/insertBySelector.js”;
I realize it’s because my webpack is trying to parse the css as a js file. But I don’t understand why? What am I doing wrong? Please help me fix it!