build: 🏗️ use plugin for tailwind integration

Provides both tailwind integration as well as minification of all css.

eleventy.config.js

@@ -13,6 +13,7 @@ import eleventyPluginReadingTime from '@myxotod/eleventy-plugin-readingtime';
 import eleventyPluginRobotsTxt from 'eleventy-plugin-robotstxt';
 import eleventyPluginRss from '@11ty/eleventy-plugin-rss';
 import eleventyPluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
+import eleventyPluginTailwindcss from 'eleventy-plugin-tailwindcss-4';
 import eleventyPluginTinyHtml from '@sardine/eleventy-plugin-tinyhtml';
 import markdownIt from 'markdown-it';
 import markdownItAbbr from 'markdown-it-abbr';
@@ -126,7 +127,12 @@ export default async function (eleventyConfig) {
     }
   });
   eleventyConfig.addPlugin(eleventyPluginRss);
-  eleventyConfig.addPlugin(eleventyPluginTinyHtml);
+  eleventyConfig.addPlugin(eleventyPluginTailwindcss, {
+    input: 'css/style.css',
+    output: 'css/style.css',
+    minify: true
+  });
+  eleventyConfig.addPlugin(eleventyPluginTinyHtml, { removeOptionalTags: false });
 
   eleventyConfig.setLibrary('md', markdownIt(MARKDOWNIT_OPTIONS));
 

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "eleventy --serve --incremental & npx @tailwindcss/cli -i ./src/css/style.css -o ./public/css/style.css --watch",
-    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --minify",
+    "start": "eleventy --serve --incremental",
+    "build": "ELEVENTY_PRODUCTION=true eleventy",
     "prebuild": "rm -rf ./public"
   },
   "keywords": [],
@@ -34,6 +34,7 @@
     "eleventy-plugin-metagen": "^1.8.3",
     "eleventy-plugin-og-image": "^4.0.1",
     "eleventy-plugin-robotstxt": "^1.0.0",
+    "eleventy-plugin-tailwindcss-4": "^2.0.1",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-collapsible": "^2.0.2",

src/css/style.css

@@ -1,5 +1,11 @@
 @import 'tailwindcss';
+
+@import '../fonts/tilt-warp/tilt-warp.css';
+@import '../fonts/encode-sans/encode-sans.css';
+@import '../fonts/m-plus-1-code/m-plus-1-code.css';
+
 @import './modules/callouts.css' layer(base);
+@import './prism.css';
 
 @plugin '@tailwindcss/typography';
 @plugin 'tailwindcss-safe-area';

src/layouts/base.njk

@@ -18,11 +18,7 @@
         generator         = eleventy.generator,
         preconnect        = ['https://img.sebin-nyshkim.net'],
         dns_prefetch      = ['https://img.sebin-nyshkim.net'],
-        css               = ['/fonts/tilt-warp/tilt-warp.css',
-                             '/fonts/encode-sans/encode-sans.css',
-                             '/fonts/m-plus-1-code/m-plus-1-code.css',
-                             '/css/style.css',
-                             '/css/prism.css']
+        css               = ['/css/style.css']
     %}
     {% ogImage "og-image.og.njk", { title: title or site_name, author: author, image: image } %}
     {% if mastodon.fediverseCreator and mastodon.fediverseCreator != '' %}