Merge pull request #169 from anandgupta193/features/tailwindcss

Added tailwind css support

package.json

@@ -137,6 +137,7 @@
     "style-loader": "^3.3.2",
     "stylelint": "^15.6.0",
     "stylelint-webpack-plugin": "^4.1.1",
+    "tailwindcss": "^3.3.1",
     "webpack": "^5.80.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^5.0.2",

postcss.config.js

@@ -1,7 +1,9 @@
 const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
 
 module.exports = {
   plugins: [
+    tailwindcss('./tailwind.config.js'),
     autoprefixer,
   ],
 };

src/index.css

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

src/index.jsx

@@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import Routes from './routes/Routes';
 import Store from './redux/store';
+import './index.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container);

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    content: ['./src/**/*.{js,jsx}', './public/index.html'],
+    theme: {
+        extend: {
+            colors: {
+                // define all the base colors
+                primary: '#1B73E8',
+            },
+        },
+    },
+    plugins: [],
+};

webpack/client/webpack.common.config.js

@@ -46,6 +46,19 @@ module.exports = {
           loader: 'babel-loader',
         },
       },
+      {
+        test: /\.css$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+          loader: 'postcss-loader',
+            options: {
+              sourceMap: isDevEnv,
+            },
+          }
+        ],
+      },
       {
         test: /\.scss$/,
         use: [

webpack/server/webpack.common.config.js

@@ -27,6 +27,19 @@ module.exports = {
           loader: 'babel-loader',
         },
       },
+      {
+        test: /\.css$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+          loader: 'postcss-loader',
+            options: {
+              sourceMap: isDevEnv,
+            },
+          }
+        ],
+      },
       {
         test: /\.scss$/,
         use: [