@haylee.mertz
To use SCSS and Tailwind CSS with Storybook in Next.js, you can follow these steps:
- Install necessary dependencies:
1
|
npm install sass tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/line-clamp
|
- Create a postcss.config.js file in the root of your project:
1
2
3
4
5
6
|
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
|
- Create a tailwind.config.js file in the root of your project:
1
2
3
4
5
6
7
|
module.exports = {
theme: {},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
],
}
|
- Create a styles/global.scss file in your project:
1
2
3
|
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
|
- Update your next.config.js file to include SCSS support:
1
2
3
4
5
6
7
|
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
|
- Update your .storybook/main.js file to include SCSS and Tailwind CSS support:
1
2
3
4
5
6
7
8
9
10
11
12
|
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
|
- Update your .storybook/preview.js file to include the global styles:
1
|
import '../styles/global.scss'
|
Now you should be able to use SCSS and Tailwind CSS with Storybook in your Next.js project.
