Added base styles, variables, and mixins

postcss.config.mjs

@@ -1,6 +1,54 @@
-const config = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
+// postcss.config.js
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
+import glob from 'glob-all';
+import path from 'path';
+import postcssGlobalData from '@csstools/postcss-global-data';
+import postcssEasing from 'postcss-easings';
+import postcssImport from 'postcss-import';
+import postcssMixins from 'postcss-mixins';
+import postcssNesting from 'postcss-nesting';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssUtilities from 'postcss-utilities';
+import postcssFunctions from 'postcss-functions';
+import customFunctions from './src/postcss/functions';
+
+const plugins = [
+  postcssGlobalData({
+    files: ['./src/styles/variables/custom-media.css'],
+  }),
+  postcssMixins({
+    mixinsDir: './src/styles/mixins/',
+  }),
+  postcssImport(),
+  postcssPresetEnv({
+    stage: 1,
+    features: {
+      'nesting-rules': false,
+      'media-query-ranges': {
+        preserve: true,
+      },
+    },
+  }),
+  postcssEasing(),
+  postcssUtilities(),
+  postcssNesting(),
+  postcssFunctions({
+    functions: customFunctions,
+  }),
+];
+
+if (process.env.NODE_ENV === 'production') {
+  plugins.push(
+    purgeCSSPlugin({
+      content: glob.sync([
+        path.join(process.cwd(), 'src/**/*.{js,jsx,ts,tsx,css}'),
+        path.join(process.cwd(), 'content/**/*.{md,mdx}'),
+      ]),
+      safelist: ['html', 'body'],
+    })
+  );
+}
+
+export default {
+  plugins,
 };
-export default config;