adds tailwindcss

index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import reactDom from 'react-dom';
 import App from './src/App';
+import './src/style.css';
 
 reactDom.render(<App />, document.getElementById('root'));

package.json

@@ -33,12 +33,20 @@
     "@babel/runtime": "^7.20.13",
     "babel-loader": "^9.1.2",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^6.7.3",
     "eslint": "^8.33.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jest": "^27.2.1",
     "html-webpack-plugin": "^5.5.0",
     "path": "^0.12.7",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
+    "postcss-preset-env": "^8.0.1",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.2",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"

postcss.config.js

@@ -0,0 +1,2 @@
+const tailwindcss = require('tailwindcss');
+module.exports = { plugins: ['postcss-preset-env', tailwindcss] };

src/App.js

@@ -1,7 +1,11 @@
 import React from 'react';
 
 const App = () => {
-  return <h1>Welcome to React App thats build using Webpack and Babel separately</h1>;
+  return (
+    <h1 className="text-3xl font-bold underline  ">
+      Welcome to React App thats build using Webpack and Babel separately
+    </h1>
+  );
 };
 
 export default App;

src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

webpack.config.js

@@ -73,8 +73,13 @@ module.exports = {
         test: /\.(js|jsx)$/, //kind of file extension this rule should look for and apply in test
         exclude: /node_modules/, //folder to be excluded
         use: 'babel-loader' //loader which we are going to use
+      },
+      {
+        test: /\.css$/i,
+        include: path.resolve(__dirname, 'src'),
+        use: ['style-loader', 'css-loader', 'postcss-loader']
       }
     ]
-  },
+  }
   // plugins: [new HtmlWebpackPlugin()],
 };