Replace tailwind build process

app/app.js

@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'meilisearch-admin/config/environment';
+import './assets/styles.css';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

app/assets/styles.css

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

app/styles/app.css

@@ -1,43 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@import 'ember-basic-dropdown';
-
-.royal-table {
-  @apply table-auto border text-left mb-4;
-
-  thead {
-    @apply bg-light;
-
-    tr {
-      @apply border-b;
-
-      th {
-        @apply px-4 py-4 text-dark font-normal whitespace-nowrap;
-
-        &[type="button"] {
-          @apply cursor-pointer select-none;
-        }
-
-        svg {
-          width: 1em;
-          height: 1em;
-          bottom: .1em;
-          position: relative;
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      &:nth-child(even) {
-        @apply bg-light;
-      }
-
-      td {
-        @apply px-4 py-2 text-text;
-      }
-    }
-  }
-}

config/postcss.config.js

@@ -0,0 +1,20 @@
+const env = process.env.EMBER_ENV || 'development';
+
+const plugins = [
+  require('tailwindcss/nesting'),
+  require('tailwindcss')({ config: './config/tailwind.config.js' }),
+  require('autoprefixer'),
+];
+
+if (env === 'production') {
+  plugins.push(
+    require('cssnano')({
+      preset: 'default',
+    })
+  );
+}
+
+module.exports = {
+  // cacheInclude: [/.*\.(css|scss|hbs)$/, /.*tailwind.config.js$/],
+  plugins,
+};

config/tailwind.config.js

@@ -1,4 +1,8 @@
 const colors = require('tailwindcss/colors');
+const path = require('node:path');
+const defaultTheme = require('tailwindcss/defaultTheme');
+const appEntry = path.join(__dirname, 'app');
+const relevantFilesGlob = '**/*.{html,js,ts,hbs,gjs,gts}';
 
 const light = '#FAFAFA';
 // const gray = '#EEEDEF';
@@ -14,7 +18,7 @@ const dark = '#1E1E1E';
 // const primary = '#ff5caa';
 
 module.exports = {
-  content: ['./app/**/*.html', './app/**/*.hbs'],
+  content: [path.join(appEntry, relevantFilesGlob)],
   darkMode: 'media',
   theme: {
     extend: {

ember-cli-build.js

@@ -3,32 +3,66 @@
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const { Webpack } = require('@embroider/webpack');
 
+function isProduction() {
+  return EmberApp.env() === 'production';
+}
+
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
     'ember-power-select': {
       theme: false,
     },
-    postcssOptions: {
-      compile: {
-        cacheInclude: [/.*\.(css|scss|hbs)$/, /.*tailwind.config.js$/],
-        plugins: [
-          require('tailwindcss/nesting'),
-          require('tailwindcss')('./config/tailwind.config.js'),
-          require('autoprefixer'),
-        ],
-      },
-    },
   });
 
   return require('@embroider/compat').compatBuild(app, Webpack, {
-    // staticAddonTestSupportTrees: true,
-    // staticAddonTrees: true,
-    // staticHelpers: true,
-    // staticModifiers: true,
+    staticAddonTestSupportTrees: true,
+    staticAddonTrees: true,
+    staticHelpers: true,
+    staticModifiers: true,
     staticComponents: true,
-    // splitAtRoutes: ['route.name'],
-    // packagerOptions: {
-    //    webpackConfig: { }
-    // }
+    // splitAtRoutes: [],
+    packagerOptions: {
+      // publicAssetURL is used similarly to Ember CLI's asset fingerprint prepend option.
+      publicAssetURL: '/',
+      // Embroider lets us send our own options to the style-loader
+      cssLoaderOptions: {
+        // don't create source maps in production
+        sourceMap: isProduction() === false,
+        // enable CSS modules
+        modules: {
+          // global mode, can be either global or local
+          // we set to global mode to avoid hashing tailwind classes
+          mode: 'global',
+          // class naming template
+          localIdentName: isProduction()
+            ? '[sha512:hash:base64:5]'
+            : '[path][name]__[local]',
+        },
+      },
+      webpackConfig: {
+        module: {
+          rules: [
+            {
+              // When webpack sees an import for a CSS files
+              test: /\.css$/i,
+              exclude: /node_modules/,
+              use: [
+                {
+                  // use the PostCSS loader addon
+                  loader: 'postcss-loader',
+                  options: {
+                    sourceMap: isProduction() === false,
+                    postcssOptions: {
+                      config: './config/postcss.config.js',
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+    extraPublicTrees: [],
   });
 };

package.json

@@ -52,9 +52,10 @@
     "@types/ember__template": "^3.16.1",
     "@types/ember__test": "^3.16.1",
     "@types/ember__utils": "^3.16.2",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.8",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
+    "cssnano": "^5.1.12",
     "els-addon-typed-templates": "^4.2.4",
     "ember-auto-import": "^2.4.2",
     "ember-cli": "~4.6.0",
@@ -63,7 +64,6 @@
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-htmlbars": "^6.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-postcss": "^8.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-composable-helpers": "^5.0.0",
@@ -90,10 +90,12 @@
     "loader.js": "^4.7.0",
     "meilisearch": "^0.25.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "qunit": "^2.19.1",
     "qunit-dom": "^2.0.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.1.8",
     "tracked-built-ins": "^2.0.1",
     "webpack": "^5.74.0"
   },
@@ -102,5 +104,8 @@
   },
   "ember": {
     "edition": "octane"
+  },
+  "volta": {
+    "node": "16.16.0"
   }
 }