Storybook + PostCSS + TailwindCSS

Folder Structure

---

├── .storybook/
│   ├── main.js
│   ├── preview.js
│── public/
│── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── Button/
│   │   │   │   ├── Button.js
│   │   │   │   ├── Button.stories.js
│   │   ├── styles/
│   │   │   ├── main.css
│   │   │   ├── tailwind.css
│   │   └── index.js
├── ...

Create a new React project and install TailwindCSS

---

1. Create a new project using the create-react-app command:

   npx create-react-app storybook-postcss-tailwind

2. Install TailwindCSS.

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

• Inside tailwind.css file, add the following line:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

3. Create tailwind.config.js with npx.

   --full option scaffold file that matches the default configuration file that Tailwind uses internally.

   npx tailwindcss init --full

• Inside tailwind.config.js file, add the following line inside purge:[]:

   "./src/**/*.{js,ts,jsx,tsx}"}

4. Install postcss-cli and create postcss.config.js file.

   npm install -D postcss-cli

   
   

• Inside postcss.config.js, add the following:

   module.exports = {
   	plugins: {
   		tailwindcss: {},
   		autoprefixer: {},
   	},
   };

Install Storybook and create a new component

---

1. Initialize Storybook with the following command:

   npx sb init

2. Create sample component src/lib/components/Button/Button.js, with tailwindcss

```js
import React from ‘react’
import PropTypes from 'prop-types'

const Button = ({ label }) => {

	return (
		<div>

			<button 
			className='bg-red-500 text-white text-xl py-4 px-8 rounded-md'>{label}</button>

		</div>
	)
};

Button.propTypes = {
label: PropTypes.string.isRequired
};

Button.defaultProps = {
label: 'Button'
};

export default Button
```

3. Create src/lib/components/Button/Button.stories.js with the following content:

```js
import React from 'react';
import Button from './Button'

export default {
	title: 'Example/Button',
	component: Button,
};

const Template = (args) => <Button {...args} />


export const Default = Template.bind({})
Default.args = {
	label: 'Button'
};
```

4. Inside src/lib/index.js, add the following line:

```js
import './styles/main.css';
import Button from './lib/components/Button/Button'

export { 
	Button 
};
```

Configure package.json and install additional dependencies

---

• Install additional dev dependencies:

```bash
npm i -D cross-env @babel/cli @babel/preset-env @babel/preset-react 
```

• Create babel.config.js file:

```js
module.exports = function (api) {
api.cache(true);

const presets = [ "@babel/preset-env", "@babel/preset-react" ];
const plugins = [ "macros" ];

	return {
		presets,
		plugins
	};
}
```

• To avoid any React conflict, you can move the following React dependencies to a peer dependency:

```js
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
```

1. Inside package.json, add the following scripts for TailwindCSS:

```js
"scripts": {
	"build:tailwind": "postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css",
	"build:tailwind-prod": "cross-env NODE_ENV=production postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css"
},
```

2. To prepare for production we need to add the following script at the top of package.json:

```js
"private": true, // change to false to make the project public
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
	"dist",
	"README.md"
],
```

• Still inside package.json, add the following under scripts:

```js
"scripts": {
	"clean": "rimraf dist",
	"compile": "npm run clean && cross-env NODE_ENV=production babel src/lib/ --out-dir dist --copy-files"
},
```

Building for production and Publishing to npm

---

1. Build tailwindcss for production:

```bash
npm run build:tailwind-prod
```

2. Compile components for production:

```bash
npm run compile
```

3. If you don't have a npm account, create one.

2. Execute the following command:

```bash
npm login
```

4. Execute the following command:

```bash
npm publish
```

Conclusion

---

NPM is a great tool for creating and publishing your own packages. Now you can use TailwindCSS with your own components. Creating your own components library is a great way to learn more about React and TailwindCSS, and you can use it for next projects as well. Storybook is a great tool for creating and testing components. You can use it for next projects as well.
Improvements:

• Add a new components

- Create stories for components
- Create test cases for components

References

---

• TailwindCSS

- [Storybook](https://storybook.js.org/)
- [React](https://reactjs.org/)
- [NPM](https://www.npmjs.com/)

License

---

Crafted with ❤️ by [Minja]