From f843ccca01f0ad2d1e302ac514a42b46398b36e9 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 19 Nov 2025 18:44:11 +0100 Subject: [PATCH] docs: move TW CSS infos to CSS --- src/docs/css.md | 18 +++++++++++++++++- src/pages/get-started.md | 2 -- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/docs/css.md b/src/docs/css.md index 4a3aae1..a0fc1d0 100644 --- a/src/docs/css.md +++ b/src/docs/css.md @@ -36,4 +36,20 @@ It makes visible when your code[ wrapped in `` elements](https://github ### Cascade layers -We now use cascade layers! Up until now, I used the `:where()` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS. \ No newline at end of file +We now use cascade layers! Up until now, I used the `:where()` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS. + +### Tailwind CSS + +You will find that Tailwind CSS does not work as you might expect here. I explain this in [one of the blog posts](/blog/what-is-tailwind-css-doing-here/). + +If you are working with **VS Code** I recommend installing the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) addon, as it works also for the custom utility classes. + +If the IntelliSense does not seem to work in Nunjucks files, try adding this to your VS Code settings: +```json + "tailwindCSS.includeLanguages": { + "jinja-html": "html", + "jinja": "html", + "njk": "html" + }, +``` + diff --git a/src/pages/get-started.md b/src/pages/get-started.md index fce6e6b..f36201f 100644 --- a/src/pages/get-started.md +++ b/src/pages/get-started.md @@ -11,8 +11,6 @@ You can use this starter as a template for your blog and you are ready to go! Bu - edit your personal details and social media in `src/_data/personal.yaml`. - Open `src/assets/css/global/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule. -If you are working with **VS Code** I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I explain this in [one of the blog posts](/blog/what-is-tailwind-css-doing-here/). - The [blog posts](/blog/) also explain / show some features that aren't covered here. ## "Docs" lol