From 4a444614bcbf3131c9611602b021afd224cdfbfa Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 30 Jan 2025 18:27:37 +0100 Subject: [PATCH] feat: :sparkles: upgrade to tailwind v4 --- package.json | 6 +++--- src/css/style.css | 20 ++++++++++++++------ src/layouts/base.njk | 6 +++--- src/layouts/blogpost.njk | 4 ++-- src/layouts/page.njk | 2 +- src/layouts/postlist.njk | 12 ++++++------ src/posts.njk | 2 +- tailwind.config.js | 17 ----------------- 8 files changed, 30 insertions(+), 39 deletions(-) delete mode 100644 tailwind.config.js diff --git a/package.json b/package.json index 12f6020..fdb25bb 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "start": "eleventy --serve & npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --watch", + "start": "eleventy --serve & 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", "prebuild": "rm -rf ./public" }, @@ -26,7 +26,7 @@ "@grimlink/eleventy-plugin-lucide-icons": "^2.1.1", "@myxotod/eleventy-plugin-readingtime": "^2.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", - "@tailwindcss/typography": "^0.5.15", + "@tailwindcss/cli": "^4.0.0", "eleventy-plugin-embed-everything": "^1.19.0", "eleventy-plugin-icons": "^4.5.1", "eleventy-plugin-metagen": "^1.8.3", @@ -40,7 +40,7 @@ "markdown-it-image-figures": "^2.1.1", "markdown-it-obsidian-callouts": "^0.3.1", "simple-icons": "^13.20.0", - "tailwindcss": "^3.4.16", + "tailwindcss": "^4.0.0", "tailwindcss-safe-area": "^0.6.0" } } diff --git a/src/css/style.css b/src/css/style.css index 0bfece9..9de10eb 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,8 +1,16 @@ -@import url(modules/callouts.css); +@import 'tailwindcss'; +@import './modules/callouts.css' layer(base); -@tailwind base; -@tailwind components; -@tailwind utilities; +@plugin '@tailwindcss/typography'; +@plugin 'tailwindcss-safe-area'; + +@theme { + --grid-template-rows-article-header: 1fr auto 0; + + --min-height-128: 32rem; + --min-height-160: 40rem; + --min-height-192: 48rem; +} :root { --font-copy: 'Encode Sans', sans-serif; @@ -64,12 +72,12 @@ summary { dl { dt { - @apply !font-normal !text-sky-600 dark:!text-sky-300; + @apply font-normal! text-sky-600! dark:text-sky-300!; font-family: var(--font-heading); } code { - @apply !text-sky-800 dark:!text-sky-500; + @apply text-sky-800! dark:text-sky-500!; } } diff --git a/src/layouts/base.njk b/src/layouts/base.njk index b631bdc..22beb09 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -33,7 +33,7 @@
-
+
-
+
{{ content | safe }}
diff --git a/src/layouts/page.njk b/src/layouts/page.njk index bc6c5f8..5418cde 100644 --- a/src/layouts/page.njk +++ b/src/layouts/page.njk @@ -2,6 +2,6 @@ layout: base.njk --- -
+
{{ content | safe }}
diff --git a/src/layouts/postlist.njk b/src/layouts/postlist.njk index 273382e..c39b8ac 100644 --- a/src/layouts/postlist.njk +++ b/src/layouts/postlist.njk @@ -2,7 +2,7 @@ layout: base.njk --- -
+

{{ title }}

Everything I have written, from newest to oldest.

@@ -15,21 +15,21 @@ layout: base.njk
  1. {% if page.url != pagination.href.first %} - {% lucide "chevron-first" %} + {% lucide "chevron-first" %} {% else %} {% lucide "chevron-first" %} {% endif %}
  2. {% if pagination.href.previous %} - {% lucide "chevron-left" %} + {% lucide "chevron-left" %} {% else %} {% lucide "chevron-left" %} {% endif %}
    3. {%- for pageEntry in pagination.pages %}
  3. - {% if pagination.href.next %} - {% lucide "chevron-right" %} + {% lucide "chevron-right" %} {% else %} {% lucide "chevron-right" %} {% endif %}
  4. {% if page.url != pagination.href.last %} - {% lucide "chevron-last" %} + {% lucide "chevron-last" %} {% else %} {% lucide "chevron-last" %} {% endif %} diff --git a/src/posts.njk b/src/posts.njk index 71feff1..8de7555 100644 --- a/src/posts.njk +++ b/src/posts.njk @@ -12,7 +12,7 @@ pagination: --- {% for post in blogposts %} -
    +

    {{ post.data.title }}

    {%- from 'postmeta.macro.njk' import postmeta %} diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 57a2853..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,17 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./src/**/*.{html,md,njk,ejs,pug}'], - theme: { - extend: { - gridTemplateRows: { - 'article-header': '1fr auto 0' - }, - minHeight: { - '128': '32rem', - '160': '40rem', - '192': '48rem' - } - } - }, - plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")] -};