diff --git a/astro.config.ts b/astro.config.ts index a2291437..8284983c 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -1,10 +1,11 @@ import mdx from '@astrojs/mdx'; import partytown from '@astrojs/partytown'; import react from '@astrojs/react'; -import tailwind from '@astrojs/tailwind'; import icon from 'astro-icon'; import { defineConfig } from 'astro/config'; +import tailwindcss from '@tailwindcss/vite'; + // must use relative imports, and their entire import subtrees import { remarkReadingTime } from './plugins/remark-reading-time.mjs'; // @@ -31,7 +32,7 @@ export default defineConfig({ react(), mdx(), // applyBaseStyles: false prevents double loading of tailwind - tailwind({ applyBaseStyles: false }), + // tailwind({ applyBaseStyles: false }), icon({ iconDir: 'src/assets/icons' }), partytown({ config: { forward: ['dataLayer.push'] }, @@ -42,5 +43,6 @@ export default defineConfig({ build: { sourcemap: false, }, + plugins: [tailwindcss()], }, }); diff --git a/docs/working-notes/todo4.md b/docs/working-notes/todo4.md index 51cfcc57..0b13c687 100644 --- a/docs/working-notes/todo4.md +++ b/docs/working-notes/todo4.md @@ -48,7 +48,18 @@ markdown link in new tab, styles my-prose-project semantic release, conventional commits ``` -// tailwind 4 -git checkout feat/tailwind4-v2 - +------------------ +git checkout -b feat/tailwind4-v2 +where to see compiled tailwind output +pogledaj layers u v4 docs +vidi @layer components sto su predefinisane sa @utility +---------- +not-* variant je sad dostupan +ne treba mi vise plugin +plugin(({ addVariant }) => { + addVariant('not-first', '&:not(:first-child)'); + addVariant('not-last', '&:not(:last-child)'); +}), +-------------- +migrate all @apply in css to inline jsx classes diff --git a/package.json b/package.json index 03ad5211..9fd67577 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@astrojs/partytown": "^2.1.4", "@astrojs/react": "^4.2.1", "@astrojs/sitemap": "^3.2.1", - "@astrojs/tailwind": "^5.1.5", + "@tailwindcss/vite": "^4.0.12", "@fontsource-variable/inter": "^5.2.5", "astro": "^5.4.2", "astro-embed": "^0.9.0", @@ -56,7 +56,7 @@ "reading-time": "^1.5.0", "sharp": "0.33.5", "tailwind-clip-path": "^1.0.0", - "tailwind-merge": "^2.6.0", + "tailwind-merge": "^3.0.2", "zod": "^3.24.2" }, "devDependencies": { @@ -64,6 +64,7 @@ "@expressive-code/plugin-collapsible-sections": "^0.40.2", "@ianvs/prettier-plugin-sort-imports": "^4.4.1", "@iconify-json/mdi": "^1.2.3", + "@tailwindcss/postcss": "^4.0.0", "@tailwindcss/typography": "^0.5.16", "@types/mdast": "^4.0.3", "@types/react": "^18.3.12", @@ -81,7 +82,7 @@ "satori": "^0.12.1", "satori-html": "^0.3.2", "serve": "^14.2.4", - "tailwindcss": "^3.4.15", + "tailwindcss": "^4.0.11", "typescript": "^5.8.2" }, "packageManager": "yarn@1.22.22", diff --git a/postcss.config.mjs b/postcss.config.mjs index 16e22a6a..297374d8 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,9 +1,6 @@ const config = { plugins: { - 'postcss-import': {}, - 'tailwindcss/nesting': {}, - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, }; diff --git a/src/components/Header.astro b/src/components/Header.astro index 0a923089..551d2436 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -27,7 +27,7 @@ const activeNavItemPath = getActiveNavItemPath(routePathname);