Update to Eleventy 12, webpack 5 and Tailwind CSS 2

package.json

@@ -20,35 +20,34 @@
   },
   "license": "ISC",
   "devDependencies": {
-    "@11ty/eleventy": "^0.11.0",
+    "@11ty/eleventy": "^0.12.1",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.1",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.6",
-    "copy-webpack-plugin": "^6.0.3",
+    "copy-webpack-plugin": "^9.0.0",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
-    "css-loader": "^4.2.1",
+    "css-loader": "^5.2.6",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.4",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.21.3",
-    "eleventy-plugin-lazyimages": "^2.0.1",
+    "eleventy-plugin-lazyimages": "^2.1.0",
-    "eslint": "^7.10.0",
+    "eslint": "^7.27.0",
-    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.3",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
-    "glob": "^7.1.6",
+    "glob": "^7.1.7",
     "html-minifier": "^4.0.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.3.1",
-    "husky": "^4.2.5",
+    "husky": "^4.3.8",
-    "image-webpack-loader": "^6.0.0",
+    "image-webpack-loader": "^7.0.1",
-    "lint-staged": "^10.2.11",
+    "lint-staged": "^11.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "npm-run-all": "^4.1.5",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^5.3.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
     "serve": "^11.3.2",
-    "tailwindcss": "^1.6.2",
+    "tailwindcss": "^2.1.2",
-    "webpack": "^4.44.1",
+    "webpack": "^5.37.1",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.7.0"
-    "webpack-fix-style-only-entries": "^0.5.1"
   },
   "husky": {
     "hooks": {

src/assets/styles/main.css

@@ -73,7 +73,7 @@ a:hover {
 }
 
 .content table {
-  @apply whitespace-no-wrap my-8 border-collapse block overflow-auto;
+  @apply whitespace-nowrap my-8 border-collapse block overflow-auto;
 }
 
 .content th,

tailwind.config.js

@@ -1,7 +1,44 @@
 module.exports = {
   purge: ['./src/**/*.ejs', './src/**/*.md'],
   theme: {
-    extend: {},
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    extend: {
+      colors: {
+        blue: {
+          100: '#ebf8ff',
+          200: '#bee3f8',
+          300: '#90cdf4',
+          400: '#63b3ed',
+          500: '#4299e1',
+          600: '#3182ce',
+          700: '#2b6cb0',
+          800: '#2c5282',
+          900: '#2a4365',
+        },
+        gray: {
+          100: '#f7fafc',
+          200: '#edf2f7',
+          300: '#e2e8f0',
+          400: '#cbd5e0',
+          500: '#a0aec0',
+          600: '#718096',
+          700: '#4a5568',
+          800: '#2d3748',
+          900: '#1a202c',
+        },
+      },
+    },
   },
   variants: {},
   plugins: [],

webpack.config.js

@@ -1,10 +1,8 @@
 const glob = require('glob');
 const path = require('path');
-const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 
 const entries = glob.sync(path.resolve(__dirname, 'src/assets/images/posts/*.{png,gif,jpg,jpeg}'));
 entries.push(path.resolve(__dirname, 'src/assets/styles/main.css'));
@@ -29,10 +27,6 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{ from: path.resolve(__dirname, 'public'), to: path.resolve(__dirname, '_site') }],
     }),
-    new webpack.HashedModuleIdsPlugin(),
-    new FixStyleOnlyEntriesPlugin({
-      extensions: ['less', 'scss', 'css', 'styl', 'sass', 'png', 'gif', 'jpg', 'jpeg'], // Empty js should also not be generated with image
-    }),
     new MiniCssExtractPlugin({
       filename: cssFileName,
     }),