In this tutorial we will precompile jsx codes with babel and then pack the entire app that includes tailwindcss and React
with webpack. At
last we have app.js bundle file that contains all javascript source codes, dependencies and tailwindcss.
- Initialize the
npmin project root directory.$ npm init
- Install React
$ npm install react react-dom
- Install babel
$ npm install babel-cli babel-plugin-transform-runtime babel-preset-react-app babel-runtime
- Install webpack and webpack loaders
$ npm install webpack webpack-cli css-loader postcss postcss-loader postcss-preset-env style-loader
- Install tailwindcss
$ npm install tailwindcss
Create a file named webpack.config.js in the root directory of your project and add this code to it.
- The
entryshould be the path of your entry point precompiled React app. - The
testproperty identifies which file or files should be transformed. - The
useproperty indicates which loader should be used to do the transforming.
module.exports = {
mode: 'development',
entry: './**/compiled/App.js',
output: {
filename: 'app.js',
path: __dirname + '/dist',
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};Create a file named tailwind.config.js in the root directory of your project and add this code to it.
The content has the path to the bundle files.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./dist/*.js',
],
theme: {
extend: {},
},
plugins: [],
}Create a file named postcss.config.js in the root directory of your project and add this code to it.
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
'postcss-preset-env',
tailwindcss
],
};Create a CSS file named app.css and add the @tailwind directives for each of Tailwind’s layers.
@tailwind base;
@tailwind components;
@tailwind utilities;Now import the app.css file to the App.js file or any other javascript files that using jsx.
import React from "react";
import "app.css";
export function App() {
return <h1 className="text-3xl font-bold underline">Hello Bacteria!</h1>
}Open package.json file to add these scripts.
- The first path is the directory that contains all of your javascript source codes.
- The second path tells the babel to where put the precompiled javascript codes.
"scripts": {
"build": "npx babel ./**/javascript --out-dir ./**/compiled --presets react-app/prod && npx webpack"
}Run this command bellow to build and pack your entire source code.
$ npm run buildNow open your index.html file to enjoy :)