Add tailwindcss

webpack.config.js

@@ -14,7 +14,8 @@ const plugins = [
         filename: './index.html',
     }),
     new MiniCssExtractPlugin({
-        filename: '[name].[contenthash].css',
+        // filename: '[name].[contenthash].css',
+        filename: '[name].css',
         ignoreOrder: false, // Enable to remove warnings about conflicting order
     }),
 ];
@@ -28,13 +29,15 @@ module.exports = {
         'vendor-styles': [
             './vendors/normalize.css@8.0.1/normalize.css',
             './vendors/highlight.js@9.12.0/theme.min.css',
+            './vendors/tailwind@1.1.4/tailwind.css',
         ],
         // The CSS for client should come after `vendor-styles`
         client: './client/index.tsx',
     },
     output: {
         path: path.join(__dirname, 'dist'),
-        filename: '[name].[contenthash].js',
+        // filename: '[name].[contenthash].js',
+        filename: '[name].js',
         // It's very important
         // All the chunk generated by webpack then will be loaded such as
         // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
@@ -53,6 +56,15 @@ module.exports = {
                         },
                     },
                     'css-loader',
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            plugins: [
+                                require('tailwindcss'),
+                            ],
+                        },
+                    },
                 ],
             },
             {