How to integrate tailwind, react and webpack
Tags: tailwindcss, react, webpack, javascript
Published: 2021-10-17 01:24:30

Step by step how to use tailwind together with react and webpack. It will be used when create shared components.

```
.
├── babel.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── App.js
│   ├── index.css
│   ├── index.html
│   └── index.js
├── tailwind.config.js
└── webpack.config.js
```

Clone our previous branch: https://github.com/ynwd/postcss/tree/tailwind

Install react
```
npm i react react-dom
```

Install babel
```
npm i @babel/core @babel/preset-env @babel/preset-react -D
```
Create babel config
```js
// babel.config.js
module.exports = {
    presets: [
        [
            "@babel/preset-react",
            {
                targets: {
                    node: "current",
                },
            },
        ],
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "entry"
            },
        ]
    ],
}
```

## Setup webpack

Install plugins and babel loader
```
npm i html-webpack-plugin webpack-dev-server babel-loader -D
```

Update webpack config
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "production",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /nodeModules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ],
}

```

## Setup react app

Create tailwind entry point
```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Update react entry point
```js
// src/index.js
import React from "react"
import ReactDom from "react-dom"
import App from "./App"
import "./index.css"

ReactDom.render(<App />, document.getElementById('app'))

```

Create react app
```js
// src/App.js
import React from "react"

function App() {
    return <div className="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
        <div className="sm:flex sm:items-center px-6 py-4">
            <img className="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars.githubusercontent.com/u/10122431?s=400&v=4" alt="" />
            <div className="text-center sm:text-left sm:flex-grow">
                <div className="mb-4">
                    <p className="text-xl leading-tight">John Doe</p>
                    <p className="text-sm leading-tight text-grey-dark">Contributor at somerepo</p>
                </div>
                <div>
                    <button className="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
                </div>
            </div>
        </div>
    </div>
}

export default App
```

Create index html
```html
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack App</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
```

Run webpack
```
npx webpack serve

```

Update package to purge tailwind for production. This will removing unused CSS from your production builds for maximum performance.


```json
{
  ...
  "scripts": {
    "serve": "webpack serve",
    "build": "NODE_ENV=production webpack"
  }
  ...
}
```

Build
```
npm run build
```

You can see the final source code on this branch: https://github.com/ynwd/postcss/tree/react