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.jsClone our previous branch:https://github.com/ynwd/postcss/tree/tailwind
Install react
npm i react react-domInstall babel
npm i @babel/core @babel/preset-env @babel/preset-react -DCreate babel config
// babel.config.jsmodule.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 -DUpdate webpack config
constMiniCssExtractPlugin=require("mini-css-extract-plugin")constHtmlWebpackPlugin=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:[newMiniCssExtractPlugin(),newHtmlWebpackPlugin({template:'./src/index.html'})],}Setup react app
Create tailwind entry point
/* src/index.css */@tailwindbase;@tailwindcomponents;@tailwindutilities;Update react entry point
// src/index.jsimportReactfrom"react"importReactDomfrom"react-dom"importAppfrom"./App"import"./index.css"ReactDom.render(<App/>,document.getElementById('app'))Create react app
// src/App.jsimportReactfrom"react"functionApp(){return<divclassName="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"><divclassName="sm:flex sm:items-center px-6 py-4"><imgclassName="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=""/><divclassName="text-center sm:text-left sm:flex-grow"><divclassName="mb-4"><pclassName="text-xl leading-tight">JohnDoe</p><pclassName="text-sm leading-tight text-grey-dark">Contributoratsomerepo</p></div><div><buttonclassName="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>}exportdefaultAppCreate index html
<!-- src/index.html --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>React Webpack App</title></head><body><divid="app"></div></body></html>Run webpack
npx webpack serveUpdate 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 buildYou can see the final source code on this branch:https://github.com/ynwd/postcss/tree/react
Top comments(2)
- LocationIndia
- WorkOn My Own
- Joined
Thanks for such help, I think it would be quite helpful if you clear out some few things about cloning the repo.
For further actions, you may consider blocking this person and/orreporting abuse
