ILoveBacteria/1-react-tailwindcss-webpack.md

## 1-react-tailwindcss-webpack.md

      
    Raw
  

              1-react-tailwindcss-webpack.md
            
          
    React-Tailwindcss-Webpack Setup


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.
Table of Contents


React-Tailwindcss-Webpack Setup

Table of Contents
Install Dependencies
Configuration files

Webpack
Tailwindcss
Postcss


Add Tailwind Directives
Import CSS file
Add npm Scripts
Build
Enjoy


Install Dependencies


Initialize the npm in 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


Configuration files

Webpack

Create a file named webpack.config.js in the root directory of your project and add this code to it.

The entry should be the path of your entry point precompiled React app.
The test property identifies which file or files should be transformed.
The use property 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'],
            },
        ],
    },
};
Tailwindcss

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: [],
}
Postcss

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
    ],
};
Add Tailwind Directives

Create a CSS file named app.css and add the @tailwind directives for each of Tailwind’s layers.
@tailwind base;
@tailwind components;
@tailwind utilities;
Import CSS file

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>
}
Add npm Scripts

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"
    }
Build

Run this command bellow to build and pack your entire source code.
$ npm run build
Enjoy

Now open your index.html file to enjoy :)

  
## 2-webpack.config.js
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'],
            },
        ],
    },
};

## 3-tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      './dist/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

## 4-postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        'postcss-preset-env',
        tailwindcss
    ],
};

## 5-app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ILoveBacteria</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./dist/app.js" type="module" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>
	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'],
	},
	],
	},
	};
	/** @type {import('tailwindcss').Config} */
	module.exports = {
	content: [
	'./dist/*.js',
	],
	theme: {
	extend: {},
	},
	plugins: [],
	}
	const tailwindcss = require('tailwindcss');
	module.exports = {
	plugins: [
	'postcss-preset-env',
	tailwindcss
	],
	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>ILoveBacteria</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="./dist/app.js" type="module" defer></script>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>