DEV Community

ynwd
ynwd

Posted on • Updated on

How to integrate tailwind, react and webpack

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
Enter fullscreen mode Exit fullscreen mode

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

Install react

npm i react react-dom
Enter fullscreen mode Exit fullscreen mode

Install babel

npm i @babel/core @babel/preset-env @babel/preset-react -D
Enter fullscreen mode Exit fullscreen mode

Create babel config

// babel.config.js
module.exports = {
    presets: [
        [
            "@babel/preset-react",
            {
                targets: {
                    node: "current",
                },
            },
        ],
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "entry"
            },
        ]
    ],
}
Enter fullscreen mode Exit fullscreen mode

Setup webpack

Install plugins and babel loader

npm i html-webpack-plugin webpack-dev-server babel-loader -D
Enter fullscreen mode Exit fullscreen mode

Update webpack config

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' })
    ],
}

Enter fullscreen mode Exit fullscreen mode

Setup react app

Create tailwind entry point

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Update react entry point

// 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'))

Enter fullscreen mode Exit fullscreen mode

Create react app

// 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
Enter fullscreen mode Exit fullscreen mode

Create index 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>
Enter fullscreen mode Exit fullscreen mode

Run webpack

npx webpack serve

Enter fullscreen mode Exit fullscreen mode

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

{
  ...
  "scripts": {
    "serve": "webpack serve",
    "build": "NODE_ENV=production webpack"
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

Build

npm run build
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
codewithjohnson profile image
Muyiwa Johnson

will this help avoid white flash on reload on CRA?

Collapse
 
rajvirsingh1313 profile image
Rajvir Singh

Thanks for such help, I think it would be quite helpful if you clear out some few things about cloning the repo.