js: almost in with TailwindCSS

app/javascript/packs/application.css

@@ -7,3 +7,7 @@
 body {
   background: red !important;
 }
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

package.json

@@ -3,6 +3,9 @@
     "@rails/webpacker": "5.2.1"
   },
   "devDependencies": {
+    "autoprefixer": "^10.2.4",
+    "postcss": "^8.2.6",
+    "tailwindcss": "^2.0.3",
     "webpack-dev-server": "^3.11.2"
   }
 }

postcss.config.js

@@ -1,12 +1,13 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
+    require("postcss-import"),
+    require("tailwindcss"),
+    require("postcss-flexbugs-fixes"),
+    require("postcss-preset-env")({
       autoprefixer: {
-        flexbox: 'no-2009'
+        flexbox: "no-2009"
       },
       stage: 3
     })
   ]
-}
+};

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}