Merge pull request #169 from anandgupta193/features/tailwindcss

Added tailwind css support

Author: anandgupta193

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: [