Rrallvv-react-storybook-tailwind NPM

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

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

```bash
npx create-react-app storybook-postcss-tailwind
```

Install TailwindCSS.

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

Inside tailwind.css file, add the following line:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Create tailwind.config.js with npx.

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

```bash
npx tailwindcss init --full
```

Inside tailwind.config.js file, add the following line inside purge:[]:
```
```js
"./src/**/*.{js,ts,jsx,tsx}"}
```
```

Install postcss-cli and create postcss.config.js file.
```
npm install -D postcss-cli
```

Inside postcss.config.js, add the following:

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

Install Storybook and create a new component

Initialize Storybook with the following command:
```
```bash
npx sb init
```
```

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
```

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'
};
```

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"

}

<br />

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"
},
```

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`

Build tailwindcss for production:
```
```bash
npm run build:tailwind-prod
```
```
Compile components for production:
```
```bash
npm run compile
```
```
If you don't have a npm account, create one.
Execute the following command:
```
```bash
npm login
```
```
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: