Update blog example to tailwind v4.

This commit is contained in:
Sebastian Jeltsch
2025-09-12 13:30:00 +02:00
parent 3dc74d4df9
commit 907f6bcbcf
8 changed files with 118 additions and 149 deletions

View File

@@ -1,11 +1,16 @@
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";
import solidJs from "@astrojs/solid-js";
import solid from "@astrojs/solid-js";
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
integrations: [icon(), tailwind(), solidJs()],
integrations: [icon(), solid()],
vite: {
plugins: [
// @ts-expect-error: https://github.com/withastro/astro/issues/14030
tailwindcss(),
],
},
});

View File

@@ -1,18 +1,41 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import tailwind from "eslint-plugin-tailwindcss";
import tailwind from "eslint-plugin-better-tailwindcss";
import solid from "eslint-plugin-solid/configs/recommended";
import astro from "eslint-plugin-astro";
export default [
{
ignores: ["dist/", "node_modules/", ".astro/", "src/env.d.ts", "types/"],
},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
solid,
...tailwind.configs["flat/recommended"],
...astro.configs.recommended,
{
ignores: ["dist/", "node_modules/", ".astro/", "src/env.d.ts", "types/"],
plugins: {
"better-tailwindcss": tailwind,
},
rules: {
...tailwind.configs["recommended-warn"].rules,
...tailwind.configs["recommended-error"].rules,
"better-tailwindcss/enforce-consistent-line-wrapping": "off",
// Order is different from what prettier enforces.
"better-tailwindcss/enforce-consistent-class-order": "off",
"better-tailwindcss/no-unregistered-classes": [
"error",
{
ignore: ["image-shine", "gradient-line"],
},
],
},
settings: {
"better-tailwindcss": {
entryPoint: "src/css/style.css",
},
},
},
{
files: ["**/*.{js,mjs,cjs,mts,ts,tsx,jsx,astro}"],
@@ -36,10 +59,5 @@ export default [
"solid/self-closing-comp": "off",
},
languageOptions: { globals: globals.browser },
settings: {
tailwindcss: {
whitelist: ["hide-scrollbars", "collapsible.*"],
},
},
},
];

View File

@@ -13,7 +13,6 @@
"types": "make --always-make types"
},
"dependencies": {
"@astrojs/tailwind": "^5.1.5",
"@nanostores/persistent": "^1.1.0",
"@nanostores/solid": "^1.1.1",
"astro": "^5.13.7",
@@ -28,17 +27,18 @@
"@eslint/js": "^9.35.0",
"@iconify-json/tabler": "^1.2.22",
"@tailwindcss/typography": "^0.5.16",
"@tailwindcss/vite": "^4.1.13",
"@types/dateformat": "^5.0.3",
"eslint": "^9.35.0",
"eslint-plugin-astro": "^1.3.1",
"eslint-plugin-better-tailwindcss": "^3.7.8",
"eslint-plugin-solid": "^0.14.5",
"eslint-plugin-tailwindcss": "^3.18.2",
"globals": "^16.4.0",
"prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1",
"quicktype": "^23.2.6",
"sharp": "^0.34.3",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.1.13",
"typescript-eslint": "^8.43.0"
}
}

View File

@@ -23,7 +23,7 @@ function UserBadge(props: { user: User | undefined }) {
return (
<Suspense fallback={<p>...</p>}>
<div class="flex items-center gap-2 ">
<div class="flex items-center gap-2">
<Switch fallback={<Fallback />}>
<Match when={avatar()}>
<img

View File

@@ -1,3 +1,36 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@theme {
--color-pacamara-primary: #003049;
--color-pacamara-secondary: #b2a4ff;
--color-pacamara-accent: #ffb4b4;
--color-pacamara-dark: #000e14;
--color-pacamara-white: #ffffff;
--font-pacamara-inter: "Inter", sans-serif;
--font-pacamara-space: "Space Grotesk", sans-serif;
}
@layer base {
body {
font-family: "Inter", sans-serif;
}
h1 {
@apply !text-5xl !font-bold;
}
h2 {
@apply !text-3xl !font-bold;
}
h3 {
@apply !text-2xl !font-bold;
}
}
:root {
--gradient-space: 20px;
--gradient-height: 2px;

View File

@@ -4,7 +4,7 @@ import { HOST } from "@/lib/client";
const RECORD_API = `${HOST}/api/records/v1`;
const inputStyle = "outline outline-1 outline-black rounded p-1 col-span-4";
const inputStyle = "outline outline-black rounded p-1 col-span-4";
const redirect = import.meta.env.DEV ? "http://localhost:4321/" : "/";
---
@@ -41,9 +41,7 @@ const redirect = import.meta.env.DEV ? "http://localhost:4321/" : "/";
</div>
<div class="flex justify-end">
<button class="rounded bg-pacamara-accent p-2 outline outline-1">
Submit
</button>
<button class="rounded bg-pacamara-accent p-2 outline"> Submit </button>
</div>
</form>
</div>

View File

@@ -1,33 +0,0 @@
import typography from "@tailwindcss/typography";
import { fontFamily } from "tailwindcss/defaultTheme";
/**@type {import("tailwindcss").Config} */
export default {
darkMode: "class",
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
backgroundSize: {
"gradient-dashed": "20px 2px, 100% 2px",
},
extend: {
boxShadow: {
"pacamara-shadow": "0px 25px 50px -12px rgba(0, 0, 0, 0.3)",
},
fontFamily: {
"pacamara-inter": ["Inter", ...fontFamily.sans],
"pacamara-space": ["Space Grotesk", ...fontFamily.sans],
},
colors: {
"pacamara-primary": "#003049",
"pacamara-secondary": "#B2A4FF",
"pacamara-accent": "#FFB4B4",
"pacamara-dark": "#000E14",
"pacamara-white": "#ffffff",
},
aspectRatio: {
"9/10": "9 / 16",
},
},
},
plugins: [typography],
};

140
pnpm-lock.yaml generated
View File

@@ -234,7 +234,7 @@ importers:
version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.6.2)(typescript@5.9.2)
'@astrojs/solid-js':
specifier: ^5.1.1
version: 5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)
version: 5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)
'@astrojs/tailwind':
specifier: ^5.1.5
version: 5.1.5(astro@5.13.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@5.9.2)(yaml@2.8.1))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)))(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2))
@@ -527,9 +527,6 @@ importers:
examples/blog/web:
dependencies:
'@astrojs/tailwind':
specifier: ^5.1.5
version: 5.1.5(astro@5.13.7(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@4.9.4)(yaml@2.8.1))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
'@nanostores/persistent':
specifier: ^1.1.0
version: 1.1.0(nanostores@1.0.1)
@@ -557,7 +554,7 @@ importers:
devDependencies:
'@astrojs/solid-js':
specifier: ^5.1.1
version: 5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)
version: 5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)
'@eslint/js':
specifier: ^9.35.0
version: 9.35.0
@@ -566,7 +563,10 @@ importers:
version: 1.2.22
'@tailwindcss/typography':
specifier: ^0.5.16
version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)))
version: 0.5.16(tailwindcss@4.1.13)
'@tailwindcss/vite':
specifier: ^4.1.13
version: 4.1.13(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
'@types/dateformat':
specifier: ^5.0.3
version: 5.0.3
@@ -576,12 +576,12 @@ importers:
eslint-plugin-astro:
specifier: ^1.3.1
version: 1.3.1(eslint@9.35.0(jiti@2.5.1))
eslint-plugin-better-tailwindcss:
specifier: ^3.7.8
version: 3.7.8(eslint@9.35.0(jiti@2.5.1))(tailwindcss@4.1.13)
eslint-plugin-solid:
specifier: ^0.14.5
version: 0.14.5(eslint@9.35.0(jiti@2.5.1))(typescript@4.9.4)
eslint-plugin-tailwindcss:
specifier: ^3.18.2
version: 3.18.2(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)))
globals:
specifier: ^16.4.0
version: 16.4.0
@@ -598,8 +598,8 @@ importers:
specifier: ^0.34.3
version: 0.34.3
tailwindcss:
specifier: ^3.4.17
version: 3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
specifier: ^4.1.13
version: 4.1.13
typescript-eslint:
specifier: ^8.43.0
version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@4.9.4)
@@ -6998,35 +6998,13 @@ snapshots:
stream-replace-string: 2.0.0
zod: 3.25.76
'@astrojs/solid-js@5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)':
'@astrojs/solid-js@5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)':
dependencies:
solid-js: 1.9.9
vite: 6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
vite-plugin-solid: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
optionalDependencies:
solid-devtools: 0.30.1(solid-js@1.9.9)
transitivePeerDependencies:
- '@testing-library/jest-dom'
- '@types/node'
- jiti
- less
- lightningcss
- sass
- sass-embedded
- stylus
- sugarss
- supports-color
- terser
- tsx
- yaml
'@astrojs/solid-js@5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)':
dependencies:
solid-js: 1.9.9
vite: 6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
vite-plugin-solid: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
optionalDependencies:
solid-devtools: 0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
solid-devtools: 0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
transitivePeerDependencies:
- '@testing-library/jest-dom'
- '@types/node'
@@ -7064,6 +7042,28 @@ snapshots:
- tsx
- yaml
'@astrojs/solid-js@5.1.1(@testing-library/jest-dom@6.8.0)(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(solid-devtools@0.30.1(solid-js@1.9.9))(solid-js@1.9.9)(terser@5.44.0)(yaml@2.8.1)':
dependencies:
solid-js: 1.9.9
vite: 6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
vite-plugin-solid: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
optionalDependencies:
solid-devtools: 0.30.1(solid-js@1.9.9)
transitivePeerDependencies:
- '@testing-library/jest-dom'
- '@types/node'
- jiti
- less
- lightningcss
- sass
- sass-embedded
- stylus
- sugarss
- supports-color
- terser
- tsx
- yaml
'@astrojs/starlight-tailwind@4.0.1(@astrojs/starlight@0.35.2(astro@5.13.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@5.9.2)(yaml@2.8.1)))(tailwindcss@4.1.13)':
dependencies:
'@astrojs/starlight': 0.35.2(astro@5.13.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@5.9.2)(yaml@2.8.1))
@@ -7102,16 +7102,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@astrojs/tailwind@5.1.5(astro@5.13.7(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@4.9.4)(yaml@2.8.1))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))':
dependencies:
astro: 5.13.7(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@4.9.4)(yaml@2.8.1)
autoprefixer: 10.4.21(postcss@8.5.6)
postcss: 8.5.6
postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
transitivePeerDependencies:
- ts-node
'@astrojs/tailwind@5.1.5(astro@5.13.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@5.9.2)(yaml@2.8.1))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)))(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2))':
dependencies:
astro: 5.13.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.1)(terser@5.44.0)(typescript@5.9.2)(yaml@2.8.1)
@@ -8547,14 +8537,6 @@ snapshots:
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
'@tailwindcss/oxide-win32-x64-msvc': 4.1.13
'@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)))':
dependencies:
lodash.castarray: 4.4.0
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
'@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)))':
dependencies:
lodash.castarray: 4.4.0
@@ -8571,6 +8553,13 @@ snapshots:
postcss-selector-parser: 6.0.10
tailwindcss: 4.1.13
'@tailwindcss/vite@4.1.13(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))':
dependencies:
'@tailwindcss/node': 4.1.13
'@tailwindcss/oxide': 4.1.13
tailwindcss: 4.1.13
vite: 6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
'@tailwindcss/vite@4.1.13(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))':
dependencies:
'@tailwindcss/node': 4.1.13
@@ -10301,12 +10290,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
eslint-plugin-tailwindcss@3.18.2(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))):
dependencies:
fast-glob: 3.3.3
postcss: 8.5.6
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
eslint-plugin-tailwindcss@3.18.2(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2))):
dependencies:
fast-glob: 3.3.3
@@ -12200,14 +12183,6 @@ snapshots:
camelcase-css: 2.0.1
postcss: 8.5.6
postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)):
dependencies:
lilconfig: 3.1.3
yaml: 2.8.1
optionalDependencies:
postcss: 8.5.6
ts-node: 10.9.2(@types/node@16.18.126)(typescript@4.9.4)
postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)):
dependencies:
lilconfig: 3.1.3
@@ -12872,7 +12847,7 @@ snapshots:
- supports-color
optional: true
solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)):
solid-devtools@0.30.1(solid-js@1.9.9)(vite@6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)):
dependencies:
'@babel/core': 7.28.4
'@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
@@ -12881,7 +12856,7 @@ snapshots:
'@solid-devtools/shared': 0.13.2(solid-js@1.9.9)
solid-js: 1.9.9
optionalDependencies:
vite: 6.3.6(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
vite: 6.3.6(@types/node@16.18.126)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
transitivePeerDependencies:
- supports-color
optional: true
@@ -13123,33 +13098,6 @@ snapshots:
dependencies:
tailwindcss: 4.1.13
tailwindcss@3.4.17(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4)):
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
chokidar: 3.6.0
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.3.3
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.21.7
lilconfig: 3.1.3
micromatch: 4.0.8
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.1.1
postcss: 8.5.6
postcss-import: 15.1.0(postcss@8.5.6)
postcss-js: 4.0.1(postcss@8.5.6)
postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.9.4))
postcss-nested: 6.2.0(postcss@8.5.6)
postcss-selector-parser: 6.1.2
resolve: 1.22.10
sucrase: 3.35.0
transitivePeerDependencies:
- ts-node
tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)):
dependencies:
'@alloc/quick-lru': 5.2.0