From 9c80fc1de7822f31c400e439258490f980cee992 Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Tue, 24 Feb 2026 16:15:44 -0800 Subject: [PATCH 1/5] feat: add tailwind example --- examples/tailwind/package.json | 27 +++ examples/tailwind/root.config.ts | 18 ++ examples/tailwind/routes/index.tsx | 31 +++ examples/tailwind/styles/main.css | 1 + examples/tailwind/tsconfig.json | 19 ++ pnpm-lock.yaml | 359 ++++++++++++++++++++++++++++- 6 files changed, 449 insertions(+), 6 deletions(-) create mode 100644 examples/tailwind/package.json create mode 100644 examples/tailwind/root.config.ts create mode 100644 examples/tailwind/routes/index.tsx create mode 100644 examples/tailwind/styles/main.css create mode 100644 examples/tailwind/tsconfig.json diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json new file mode 100644 index 000000000..11da24ae7 --- /dev/null +++ b/examples/tailwind/package.json @@ -0,0 +1,27 @@ +{ + "name": "@examples/tailwind", + "description": "Root.js project with Tailwind CSS.", + "version": "0.0.0", + "private": true, + "type": "module", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "dev": "root dev", + "build": "rm -rf dist/ && root build", + "preview": "rm -rf dist/ out/ && root build --ssr-only && root preview", + "start": "root start", + "test": "pnpm run build" + }, + "dependencies": { + "@blinkk/root": "workspace:*", + "preact": "10.27.1", + "preact-render-to-string": "6.6.1" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.0.0", + "@types/node": "18.11.18", + "tailwindcss": "^4.0.0" + } +} diff --git a/examples/tailwind/root.config.ts b/examples/tailwind/root.config.ts new file mode 100644 index 000000000..6d4d7f200 --- /dev/null +++ b/examples/tailwind/root.config.ts @@ -0,0 +1,18 @@ +import path from 'node:path'; +import {URL} from 'node:url'; +import {defineConfig} from '@blinkk/root'; +import tailwindcss from '@tailwindcss/vite'; + +const rootDir = new URL('.', import.meta.url).pathname; + +export default defineConfig({ + vite: { + plugins: [tailwindcss()], + resolve: { + alias: { + '@': path.resolve(rootDir), + }, + }, + }, + prettyHtml: true, +}); diff --git a/examples/tailwind/routes/index.tsx b/examples/tailwind/routes/index.tsx new file mode 100644 index 000000000..4aa6f57bb --- /dev/null +++ b/examples/tailwind/routes/index.tsx @@ -0,0 +1,31 @@ +import {Body, Head, Html} from '@blinkk/root'; + +export default function Index() { + return ( + + + Root.js + Tailwind CSS + + + + +
+
+

+ Hello, Root.js + Tailwind CSS +

+

+ A minimal example using Root.js with Tailwind CSS v4. +

+ + Learn More + +
+
+ + + ); +} diff --git a/examples/tailwind/styles/main.css b/examples/tailwind/styles/main.css new file mode 100644 index 000000000..f1d8c73cd --- /dev/null +++ b/examples/tailwind/styles/main.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/examples/tailwind/tsconfig.json b/examples/tailwind/tsconfig.json new file mode 100644 index 000000000..d1914a6f0 --- /dev/null +++ b/examples/tailwind/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "node16", + "moduleResolution": "node16", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "experimentalDecorators": true, + "useDefineForClassFields": false, + "types": ["@blinkk/root/client"], + "jsx": "react-jsx", + "jsxImportSource": "preact", + "paths": { + "@/*": ["./*"] + } + }, + "exclude": ["node_modules"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f7e416695..eda497765 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -148,6 +148,28 @@ importers: specifier: 6.6.1 version: 6.6.1(preact@10.27.1) + examples/tailwind: + dependencies: + '@blinkk/root': + specifier: workspace:* + version: link:../../packages/root + preact: + specifier: 10.27.1 + version: 10.27.1 + preact-render-to-string: + specifier: 6.6.1 + version: 6.6.1(preact@10.27.1) + devDependencies: + '@tailwindcss/vite': + specifier: ^4.0.0 + version: 4.2.1 + '@types/node': + specifier: 18.11.18 + version: 18.11.18 + tailwindcss: + specifier: ^4.0.0 + version: 4.2.1 + packages/create-root: dependencies: commander: @@ -3268,6 +3290,13 @@ packages: wrap-ansi-cjs: /wrap-ansi@7.0.0 dev: true + /@jridgewell/gen-mapping@0.3.13: + resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/trace-mapping': 0.3.31 + dev: true + /@jridgewell/gen-mapping@0.3.2: resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} engines: {node: '>=6.0.0'} @@ -3276,10 +3305,22 @@ packages: '@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/trace-mapping': 0.3.15 + /@jridgewell/remapping@2.3.5: + resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} + dependencies: + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + dev: true + /@jridgewell/resolve-uri@3.0.5: resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==} engines: {node: '>=6.0.0'} + /@jridgewell/resolve-uri@3.1.2: + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} + engines: {node: '>=6.0.0'} + dev: true + /@jridgewell/set-array@1.1.2: resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} engines: {node: '>=6.0.0'} @@ -3300,6 +3341,13 @@ packages: '@jridgewell/resolve-uri': 3.0.5 '@jridgewell/sourcemap-codec': 1.5.5 + /@jridgewell/trace-mapping@0.3.31: + resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.5.5 + dev: true + /@js-sdsl/ordered-map@4.4.2: resolution: {integrity: sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==} requiresBuild: true @@ -3647,15 +3695,15 @@ packages: '@types/gapi.client.discovery-v1': 0.0.4 dev: true - /@maxim_mazurok/gapi.client.drive-v3@0.1.20260118: - resolution: {integrity: sha512-AapBEaj1ztX+AnUBvBnypCC8mWf6q72+4n0oXDopdXmggwYqDISocyoXrQ/iSCk237gFsBSb6WUYTxg7LEiojw==} + /@maxim_mazurok/gapi.client.drive-v3@0.1.20260220: + resolution: {integrity: sha512-ySN46cAYsMw6IiZ7a3eKeUqyH++eL4sPIFlgwu33l0mJHLevK4Qd5VxJOgMS8nBp44xKssCCBLRuRq091rp1WA==} dependencies: '@types/gapi.client': 1.0.8 '@types/gapi.client.discovery-v1': 0.0.4 dev: true - /@maxim_mazurok/gapi.client.sheets-v4@0.1.20260114: - resolution: {integrity: sha512-rhqbdPctKpTA9EsmLVe+FlbL2wiMd+SGBEgTedPi8IuLbmO7Dcg7+c50eQanHuFVx/rDHiol1k/LiTvDpQ/l2Q==} + /@maxim_mazurok/gapi.client.sheets-v4@0.2.20260218: + resolution: {integrity: sha512-pMFqa3nZEzXPgvdU1rzB1BJRofOMLgvlOAGw7ykUZYYibkuQUvuE1UPPhv2FPOAEYsX679jwKDsQc6Bgt3wWgw==} dependencies: '@types/gapi.client': 1.0.8 '@types/gapi.client.discovery-v1': 0.0.4 @@ -5431,6 +5479,160 @@ packages: resolution: {integrity: sha512-yYXe+gJ56xlZFiXwV9zVoe3FWCGuZ/D7/G4ZIlDtGxSx5CGQK110wrnT29gUj52kEZoxqF7oURTk97GQxELOFQ==} dev: true + /@tailwindcss/node@4.2.1: + resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==} + dependencies: + '@jridgewell/remapping': 2.3.5 + enhanced-resolve: 5.19.0 + jiti: 2.6.1 + lightningcss: 1.31.1 + magic-string: 0.30.21 + source-map-js: 1.2.1 + tailwindcss: 4.2.1 + dev: true + + /@tailwindcss/oxide-android-arm64@4.2.1: + resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-darwin-arm64@4.2.1: + resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-darwin-x64@4.2.1: + resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==} + engines: {node: '>= 20'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-freebsd-x64@4.2.1: + resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==} + engines: {node: '>= 20'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1: + resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==} + engines: {node: '>= 20'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-linux-arm64-gnu@4.2.1: + resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-linux-arm64-musl@4.2.1: + resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-linux-x64-gnu@4.2.1: + resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==} + engines: {node: '>= 20'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-linux-x64-musl@4.2.1: + resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==} + engines: {node: '>= 20'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-wasm32-wasi@4.2.1: + resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + requiresBuild: true + dev: true + optional: true + bundledDependencies: + - '@napi-rs/wasm-runtime' + - '@emnapi/core' + - '@emnapi/runtime' + - '@tybys/wasm-util' + - '@emnapi/wasi-threads' + - tslib + + /@tailwindcss/oxide-win32-arm64-msvc@4.2.1: + resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide-win32-x64-msvc@4.2.1: + resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==} + engines: {node: '>= 20'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@tailwindcss/oxide@4.2.1: + resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==} + engines: {node: '>= 20'} + optionalDependencies: + '@tailwindcss/oxide-android-arm64': 4.2.1 + '@tailwindcss/oxide-darwin-arm64': 4.2.1 + '@tailwindcss/oxide-darwin-x64': 4.2.1 + '@tailwindcss/oxide-freebsd-x64': 4.2.1 + '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1 + '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1 + '@tailwindcss/oxide-linux-arm64-musl': 4.2.1 + '@tailwindcss/oxide-linux-x64-gnu': 4.2.1 + '@tailwindcss/oxide-linux-x64-musl': 4.2.1 + '@tailwindcss/oxide-wasm32-wasi': 4.2.1 + '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1 + '@tailwindcss/oxide-win32-x64-msvc': 4.2.1 + dev: true + + /@tailwindcss/vite@4.2.1: + resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==} + peerDependencies: + vite: ^5.2.0 || ^6 || ^7 + dependencies: + '@tailwindcss/node': 4.2.1 + '@tailwindcss/oxide': 4.2.1 + tailwindcss: 4.2.1 + dev: true + /@testing-library/dom@8.20.1: resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==} engines: {node: '>=12'} @@ -5625,13 +5827,13 @@ packages: /@types/gapi.client.drive-v3@0.0.4: resolution: {integrity: sha512-jE37dJ0EzAdY0aJPFOp20xmec/aO0P4HtUIA9k07RMPyedFDOcuMlSac1r0PklwQdgXF7BHaMoObNHNAnwSQUQ==} dependencies: - '@maxim_mazurok/gapi.client.drive-v3': 0.1.20260118 + '@maxim_mazurok/gapi.client.drive-v3': 0.1.20260220 dev: true /@types/gapi.client.sheets-v4@0.0.4: resolution: {integrity: sha512-6kTJ7aDMAElfdQV1XzVJmZWjgbibpa84DMuKuaN8Cwqci/dkglPyHXKvsGrRugmuYvgFYr35AQqwz6j3q8R0dw==} dependencies: - '@maxim_mazurok/gapi.client.sheets-v4': 0.1.20260114 + '@maxim_mazurok/gapi.client.sheets-v4': 0.2.20260218 dev: true /@types/gapi.client@1.0.8: @@ -7858,6 +8060,11 @@ packages: requiresBuild: true optional: true + /detect-libc@2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + dev: true + /devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} dependencies: @@ -8036,6 +8243,14 @@ packages: dependencies: once: 1.4.0 + /enhanced-resolve@5.19.0: + resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==} + engines: {node: '>=10.13.0'} + dependencies: + graceful-fs: 4.2.10 + tapable: 2.3.0 + dev: true + /enquirer@2.3.6: resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==} engines: {node: '>=8.6'} @@ -10793,6 +11008,11 @@ packages: xorshift: 1.2.0 dev: false + /jiti@2.6.1: + resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} + hasBin: true + dev: true + /jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} @@ -11185,6 +11405,124 @@ packages: resolution: {integrity: sha512-mK8ju0fnrKXXfleL53vtp9xiPq5hKM0zbDQtcxQIsSmxNgSxqCj6R7Hl9PkrNe2j29T4yoDaF7DJLK9/i5iWUw==} dev: true + /lightningcss-android-arm64@1.31.1: + resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /lightningcss-darwin-arm64@1.31.1: + resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-darwin-x64@1.31.1: + resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-freebsd-x64@1.31.1: + resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm-gnueabihf@1.31.1: + resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-gnu@1.31.1: + resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-musl@1.31.1: + resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-gnu@1.31.1: + resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-musl@1.31.1: + resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-win32-arm64-msvc@1.31.1: + resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /lightningcss-win32-x64-msvc@1.31.1: + resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /lightningcss@1.31.1: + resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 2.1.2 + optionalDependencies: + lightningcss-android-arm64: 1.31.1 + lightningcss-darwin-arm64: 1.31.1 + lightningcss-darwin-x64: 1.31.1 + lightningcss-freebsd-x64: 1.31.1 + lightningcss-linux-arm-gnueabihf: 1.31.1 + lightningcss-linux-arm64-gnu: 1.31.1 + lightningcss-linux-arm64-musl: 1.31.1 + lightningcss-linux-x64-gnu: 1.31.1 + lightningcss-linux-x64-musl: 1.31.1 + lightningcss-win32-arm64-msvc: 1.31.1 + lightningcss-win32-x64-msvc: 1.31.1 + dev: true + /lilconfig@2.0.5: resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==} engines: {node: '>=10'} @@ -14957,6 +15295,15 @@ packages: resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true + /tailwindcss@4.2.1: + resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==} + dev: true + + /tapable@2.3.0: + resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==} + engines: {node: '>=6'} + dev: true + /tar-stream@3.1.7: resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==} dependencies: From 4f2a8505e4fd9d528b81b0d88702705a24f6e146 Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Tue, 24 Feb 2026 16:29:13 -0800 Subject: [PATCH 2/5] feat: update Tailwind CSS integration and styles --- examples/tailwind/routes/index.tsx | 6 +++--- examples/tailwind/styles/index.css | 7 +++++++ examples/tailwind/styles/main.css | 1 - 3 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 examples/tailwind/styles/index.css delete mode 100644 examples/tailwind/styles/main.css diff --git a/examples/tailwind/routes/index.tsx b/examples/tailwind/routes/index.tsx index 4aa6f57bb..37d5d6796 100644 --- a/examples/tailwind/routes/index.tsx +++ b/examples/tailwind/routes/index.tsx @@ -6,12 +6,12 @@ export default function Index() { Root.js + Tailwind CSS - + -
+
-

+

Hello, Root.js + Tailwind CSS

diff --git a/examples/tailwind/styles/index.css b/examples/tailwind/styles/index.css new file mode 100644 index 000000000..7dc0b34da --- /dev/null +++ b/examples/tailwind/styles/index.css @@ -0,0 +1,7 @@ +@import "tailwindcss"; + +@theme { + --color-primary: #C141E2; + --color-secondary: #256ABC; + --breakpoint-sm: 30rem; +} diff --git a/examples/tailwind/styles/main.css b/examples/tailwind/styles/main.css deleted file mode 100644 index f1d8c73cd..000000000 --- a/examples/tailwind/styles/main.css +++ /dev/null @@ -1 +0,0 @@ -@import "tailwindcss"; From e2bf342955ee3778cfe75bd1fccd7927c5f870bb Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Tue, 24 Feb 2026 16:41:32 -0800 Subject: [PATCH 3/5] feat: add getStaticPaths function and update breakpoint in Tailwind CSS theme --- examples/tailwind/routes/index.tsx | 7 ++++++- examples/tailwind/styles/index.css | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/examples/tailwind/routes/index.tsx b/examples/tailwind/routes/index.tsx index 37d5d6796..628a999dc 100644 --- a/examples/tailwind/routes/index.tsx +++ b/examples/tailwind/routes/index.tsx @@ -1,4 +1,9 @@ import {Body, Head, Html} from '@blinkk/root'; +import type {GetStaticPaths} from '@blinkk/root'; + +export const getStaticPaths: GetStaticPaths = async () => { + return {paths: [{params: {}}]}; +}; export default function Index() { return ( @@ -11,7 +16,7 @@ export default function Index() {

-

+

Hello, Root.js + Tailwind CSS

diff --git a/examples/tailwind/styles/index.css b/examples/tailwind/styles/index.css index 7dc0b34da..b923e7555 100644 --- a/examples/tailwind/styles/index.css +++ b/examples/tailwind/styles/index.css @@ -3,5 +3,5 @@ @theme { --color-primary: #C141E2; --color-secondary: #256ABC; - --breakpoint-sm: 30rem; + --breakpoint-sm: 640px; } From 952f7f2c3ac1655280595339a29e8ab1b93f7fca Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Tue, 24 Feb 2026 16:44:26 -0800 Subject: [PATCH 4/5] feat: update dependencies in package.json and pnpm-lock.yaml for Tailwind CSS integration --- examples/tailwind/package.json | 8 ++-- pnpm-lock.yaml | 83 +++++++++++++++++----------------- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json index 11da24ae7..928ecaf2d 100644 --- a/examples/tailwind/package.json +++ b/examples/tailwind/package.json @@ -16,12 +16,12 @@ }, "dependencies": { "@blinkk/root": "workspace:*", + "@tailwindcss/vite": "^4.0.0", "preact": "10.27.1", - "preact-render-to-string": "6.6.1" + "preact-render-to-string": "6.6.1", + "tailwindcss": "^4.0.0" }, "devDependencies": { - "@tailwindcss/vite": "^4.0.0", - "@types/node": "18.11.18", - "tailwindcss": "^4.0.0" + "@types/node": "18.11.18" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eda497765..71f8e8896 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,22 +153,22 @@ importers: '@blinkk/root': specifier: workspace:* version: link:../../packages/root + '@tailwindcss/vite': + specifier: ^4.0.0 + version: 4.2.1 preact: specifier: 10.27.1 version: 10.27.1 preact-render-to-string: specifier: 6.6.1 version: 6.6.1(preact@10.27.1) - devDependencies: - '@tailwindcss/vite': + tailwindcss: specifier: ^4.0.0 version: 4.2.1 + devDependencies: '@types/node': specifier: 18.11.18 version: 18.11.18 - tailwindcss: - specifier: ^4.0.0 - version: 4.2.1 packages/create-root: dependencies: @@ -3295,7 +3295,7 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/trace-mapping': 0.3.31 - dev: true + dev: false /@jridgewell/gen-mapping@0.3.2: resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} @@ -3310,7 +3310,7 @@ packages: dependencies: '@jridgewell/gen-mapping': 0.3.13 '@jridgewell/trace-mapping': 0.3.31 - dev: true + dev: false /@jridgewell/resolve-uri@3.0.5: resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==} @@ -3319,7 +3319,7 @@ packages: /@jridgewell/resolve-uri@3.1.2: resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} - dev: true + dev: false /@jridgewell/set-array@1.1.2: resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} @@ -3346,7 +3346,7 @@ packages: dependencies: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 - dev: true + dev: false /@js-sdsl/ordered-map@4.4.2: resolution: {integrity: sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==} @@ -5489,7 +5489,7 @@ packages: magic-string: 0.30.21 source-map-js: 1.2.1 tailwindcss: 4.2.1 - dev: true + dev: false /@tailwindcss/oxide-android-arm64@4.2.1: resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==} @@ -5497,7 +5497,7 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-darwin-arm64@4.2.1: @@ -5506,7 +5506,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-darwin-x64@4.2.1: @@ -5515,7 +5515,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-freebsd-x64@4.2.1: @@ -5524,7 +5524,7 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1: @@ -5533,7 +5533,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-linux-arm64-gnu@4.2.1: @@ -5542,7 +5542,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-linux-arm64-musl@4.2.1: @@ -5551,7 +5551,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-linux-x64-gnu@4.2.1: @@ -5560,7 +5560,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-linux-x64-musl@4.2.1: @@ -5569,7 +5569,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-wasm32-wasi@4.2.1: @@ -5577,7 +5577,7 @@ packages: engines: {node: '>=14.0.0'} cpu: [wasm32] requiresBuild: true - dev: true + dev: false optional: true bundledDependencies: - '@napi-rs/wasm-runtime' @@ -5593,7 +5593,7 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide-win32-x64-msvc@4.2.1: @@ -5602,7 +5602,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true + dev: false optional: true /@tailwindcss/oxide@4.2.1: @@ -5621,7 +5621,7 @@ packages: '@tailwindcss/oxide-wasm32-wasi': 4.2.1 '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1 '@tailwindcss/oxide-win32-x64-msvc': 4.2.1 - dev: true + dev: false /@tailwindcss/vite@4.2.1: resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==} @@ -5631,7 +5631,7 @@ packages: '@tailwindcss/node': 4.2.1 '@tailwindcss/oxide': 4.2.1 tailwindcss: 4.2.1 - dev: true + dev: false /@testing-library/dom@8.20.1: resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==} @@ -8063,7 +8063,7 @@ packages: /detect-libc@2.1.2: resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} engines: {node: '>=8'} - dev: true + dev: false /devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} @@ -8249,7 +8249,7 @@ packages: dependencies: graceful-fs: 4.2.10 tapable: 2.3.0 - dev: true + dev: false /enquirer@2.3.6: resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==} @@ -11011,7 +11011,7 @@ packages: /jiti@2.6.1: resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} hasBin: true - dev: true + dev: false /jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} @@ -11411,7 +11411,7 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-darwin-arm64@1.31.1: @@ -11420,7 +11420,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-darwin-x64@1.31.1: @@ -11429,7 +11429,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-freebsd-x64@1.31.1: @@ -11438,7 +11438,7 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-linux-arm-gnueabihf@1.31.1: @@ -11447,7 +11447,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-linux-arm64-gnu@1.31.1: @@ -11456,7 +11456,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-linux-arm64-musl@1.31.1: @@ -11465,7 +11465,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-linux-x64-gnu@1.31.1: @@ -11474,7 +11474,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-linux-x64-musl@1.31.1: @@ -11483,7 +11483,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-win32-arm64-msvc@1.31.1: @@ -11492,7 +11492,7 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: true + dev: false optional: true /lightningcss-win32-x64-msvc@1.31.1: @@ -11501,7 +11501,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true + dev: false optional: true /lightningcss@1.31.1: @@ -11521,7 +11521,7 @@ packages: lightningcss-linux-x64-musl: 1.31.1 lightningcss-win32-arm64-msvc: 1.31.1 lightningcss-win32-x64-msvc: 1.31.1 - dev: true + dev: false /lilconfig@2.0.5: resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==} @@ -11761,7 +11761,6 @@ packages: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} dependencies: '@jridgewell/sourcemap-codec': 1.5.5 - dev: true /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} @@ -15297,12 +15296,12 @@ packages: /tailwindcss@4.2.1: resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==} - dev: true + dev: false /tapable@2.3.0: resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==} engines: {node: '>=6'} - dev: true + dev: false /tar-stream@3.1.7: resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==} From cdde49d8c08120801010d056b700dd4cebe1979b Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Tue, 24 Feb 2026 16:51:59 -0800 Subject: [PATCH 5/5] feat: enhance index.tsx with comments and import for production mode --- examples/tailwind/routes/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/tailwind/routes/index.tsx b/examples/tailwind/routes/index.tsx index 628a999dc..bf5a17185 100644 --- a/examples/tailwind/routes/index.tsx +++ b/examples/tailwind/routes/index.tsx @@ -1,3 +1,6 @@ +// Needed for prod mode (included in SSG build). +import '../styles/index.css'; + import {Body, Head, Html} from '@blinkk/root'; import type {GetStaticPaths} from '@blinkk/root'; @@ -11,6 +14,7 @@ export default function Index() { Root.js + Tailwind CSS + {/** Needed for dev mode (loaded as a direct stylesheet). NOTE: We should suppress this in prod mode as it 404s. */}