TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |react |webpack |javascript

How to integrate tailwind, react and webpack

ynwd

ynwd

Posted on October 17, 2021

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

💖 💪 🙅 🚩
ynwd
ynwd

Posted on October 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to integrate tailwind, react and webpack
tailwindcss How to integrate tailwind, react and webpack

October 17, 2021