build: add webpack based build system

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tailwind-test",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.prod.js",
+    "serve": "webpack serve --config webpack.dev.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Bonajo/tailwind-test.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Bonajo/tailwind-test/issues"
+  },
+  "homepage": "https://github.com/Bonajo/tailwind-test#readme",
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^6.2.1",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.7",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer'),
+        require('postcss-nested'),
+        require('tailwindcss'),
+    ]
+};

src/css/main.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .max-w-8xl {
+        max-width: 90rem;
+    }
+}

src/index.ts

@@ -0,0 +1,49 @@
+import './css/main.css';
+
+enum Theme {
+    Light = "Light",
+    Dark = "Dark"
+}
+
+const menuToggle = document.querySelector("button#menu-toggle");
+const menu = document.querySelector("#menu");
+const menuBackdrop = document.querySelector("#menu-backdrop");
+const themeToggle = document.querySelector("#theme-toggle");
+let theme = Theme.Light;
+
+const toggleMenu = (menu: Element, menuBackdrop: Element) => {
+    menu.classList.toggle("hidden");
+    menuBackdrop.classList.toggle("hidden");
+};
+
+const getTheme = () => {
+    const currentTheme = localStorage.getItem("theme");
+    if ((!!currentTheme && Theme[currentTheme as keyof typeof Theme] === Theme.Dark) || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        theme = Theme.Dark;        
+    } else {
+        theme = Theme.Light;
+    }
+    setTheme();
+};
+
+const setTheme = () => {
+    if(theme === Theme.Dark){
+        document.documentElement.classList.add('dark');
+    }else{
+        document.documentElement.classList.remove('dark');
+    }
+};
+
+const toggleTheme = () => {
+    theme = (theme === Theme.Dark) ? Theme.Light : Theme.Dark;
+    localStorage.setItem("theme", theme);
+    setTheme();
+};
+
+if(!!menuToggle && !!menu && !!menuBackdrop){
+    menuToggle.addEventListener('click', () => toggleMenu(menu, menuBackdrop));
+}
+
+themeToggle?.addEventListener('click', toggleTheme);
+
+getTheme();

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: ["./layouts/**/*.{html,js}"],
+  darkMode: "class",
+  theme: {
+    extend: {},
+  },
+  plugins: []
+}

tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "module": "es6",
+      "target": "es5",
+      "moduleResolution": "node",
+      "removeComments": true,
+      "preserveConstEnums": true,
+      "sourceMap": true,
+      "alwaysStrict": true,
+      "allowUnreachableCode": false,
+      "strictNullChecks": true,
+      "noImplicitReturns": true,
+      "noUncheckedIndexedAccess": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true
+    }
+  }

webpack.common.js

@@ -0,0 +1,51 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+module.exports = {
+    entry: './src/index.ts',
+    output: {
+        filename: 'js/[name].js',
+        path: path.resolve(__dirname, 'static'),
+        clean: true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            },
+            {
+            test: /\.css$/i,
+            exclude: /node_modules/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                {
+                    loader: "css-loader",
+                    options: {
+                        importLoaders: 1,
+                    }
+                },
+                {
+                    loader: "postcss-loader"
+                } 
+            ],
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js']
+    },
+    optimization: {
+        minimizer: [
+            `...`,
+            new CssMinimizerPlugin(),
+        ],
+      },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "css/[name].css"
+        }),
+    ],
+};

webpack.dev.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    devtool: 'inline-source-map',
+    mode: 'development',
+    devServer: {
+        static: {
+            directory: path.resolve(__dirname, 'dist'),
+        },
+        compress: true,
+        port: 9000,
+        watchFiles: ['src/**/*.html', 'public/**/*'],
+    }
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+module.exports = merge(common, {
+    mode: 'production',
+});