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
// 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
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
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
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'))
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
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>
Run webpack
npx webpack serve
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"
}
...
}
Build
npm run build
You can see the final source code on this branch: https://github.com/ynwd/postcss/tree/react
Top comments (2)
will this help avoid white flash on reload on CRA?
Thanks for such help, I think it would be quite helpful if you clear out some few things about cloning the repo.