- STORY BOOK INSTALL
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/9ype7suwe1wjzz4x3idl-1024x576.webp)
1ST STEP : npx storybook@latest init run this command
2nd STEP : How to launch storybook
npm run storybook run this command
2. Install tailwind CSS
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/Tailwind_CSS_logo.svg-1024x126.png)
1ST STEP : npm install -D tailwindcss postcss autoprefixer
Run this command
2nd STEP : npx tailwindcss init -p
Run this command create automatic a folder name
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/tailwind.png)
3rd :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
4th : copy all above code and past below folder
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/TAILWIND_2.png)
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/TAILWIND_3.png)
5th : in storybook create a file preview-head.html
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/TAILWIND_4.png)
In preview -head.html file past belove code
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
![](https://sitecoredevservices.com/wp-content/uploads/2023/06/TAILWIND_5-1024x165.png)