refactor: add tailwindcss

config/webpack.config.js

@@ -5,7 +5,6 @@ const path = require("path");
 const webpack = require("webpack");
 // const resolve = require("resolve");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@@ -101,6 +100,22 @@ module.exports = function (webpackEnv) {
       {
         loader: require.resolve("css-loader"),
         options: cssOptions
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve("postcss-loader"),
+        options: {
+          postcssOptions: {
+            // Necessary for external CSS imports to work
+            // https://github.com/facebook/create-react-app/issues/2677
+            ident: "postcss",
+            config: false,
+            plugins: ["tailwindcss"]
+          },
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+        }
       }
     ].filter(Boolean);
     return loaders;
@@ -475,10 +490,6 @@ module.exports = function (webpackEnv) {
         new ReactRefreshWebpackPlugin({
           overlay: false
         }),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output