How to use scss and tailwind css with storybook in next.js?

by haylee.mertz , in category: Javascript , 6 months ago

How to use scss and tailwind css with storybook in next.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by gilbert , 6 months ago

@haylee.mertz 

To use SCSS and Tailwind CSS with Storybook in Next.js, you can follow these steps:

  1. Install necessary dependencies:
1
npm install sass tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/line-clamp


  1. Create a postcss.config.js file in the root of your project:
1
2
3
4
5
6
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


  1. 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'),
  ],
}


  1. Create a styles/global.scss file in your project:
1
2
3
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


  1. 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')],
  },
}


  1. 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;
  },
};


  1. 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.