3. 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}"}
```
4. Install postcss-cli and create ```postcss.config.js``` file.
```bash
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
1. Initialize Storybook with the following command:
```bash
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 (
)
};
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) =>
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](https://tailwindcss.com/)
- [Storybook](https://storybook.js.org/)
- [React](https://reactjs.org/)
- [NPM](https://www.npmjs.com/)
### License
Crafted with ❤️ by [Minja]
---
_Source: https://npm.io/package/rrallvv-react-storybook-tailwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._