From da6bef3d20d4950ab889addaeff0855614040c13 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 6 Sep 2024 02:54:57 -0700 Subject: [PATCH 1/6] Added more Tailwind showndown notes. --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index deece2b..f295c9a 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta * No high risk of eventually requiring a build step. * No chance of [deprecations](https://windicss.org/posts/sunsetting.html). 16 lines is infinitely maintainable. * Get the ultra-fast "inspect, play with styles, paste" workflow back. +* No suffering from a lack of syntax highlighting on properties and units. * No suffering from FOUC (a flash of unstyled content). * Zero friction movement of styles between inline and `.css` files. Just replace `me` * No special tooling or plugins to install. Universal vanilla CSS. @@ -103,7 +104,12 @@ Tailwind verbosity goes up with more child elements.
green
``` -### CSS variables and child styling + +### CSS variables and child elements +At first glance, **Tailwind Example 2** looks very promising! Exciting ...but: +* 🔴 **Every child style requires a selector** so the short style advantage unfortunately disappears. + * This trivial example is the best case scenario for Tailwind. +* 🔴 Not visible on github, but **zero highlighting for properties and units** begins to become painful. ```html From 50e225e3d239264bd9b5e0867a0cc1ce2d9ab885 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 6 Sep 2024 02:59:08 -0700 Subject: [PATCH 2/6] Added more Tailwind showndown notes. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f295c9a..cc8821b 100644 --- a/README.md +++ b/README.md @@ -107,9 +107,9 @@ Tailwind verbosity goes up with more child elements. ### CSS variables and child elements At first glance, **Tailwind Example 2** looks very promising! Exciting ...but: -* 🔴 **Every child style requires a selector** so the short style advantage unfortunately disappears. +* 🔴 **Every child style requires a selector** - shorthand style advantage sadly disappears. * This trivial example is the best case scenario for Tailwind. -* 🔴 Not visible on github, but **zero highlighting for properties and units** begins to become painful. +* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful. ```html From de4f6fbd8d1d14ace6755f3c2ec284513f414a46 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 6 Sep 2024 03:00:24 -0700 Subject: [PATCH 3/6] Added more Tailwind showndown notes. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cc8821b..50d34b9 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta * No high risk of eventually requiring a build step. * No chance of [deprecations](https://windicss.org/posts/sunsetting.html). 16 lines is infinitely maintainable. * Get the ultra-fast "inspect, play with styles, paste" workflow back. -* No suffering from a lack of syntax highlighting on properties and units. +* No suffering from missing syntax highlighting on properties and units. * No suffering from FOUC (a flash of unstyled content). * Zero friction movement of styles between inline and `.css` files. Just replace `me` * No special tooling or plugins to install. Universal vanilla CSS. From b999e214179505c31ca7863a82b4ae50a6807db6 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 6 Sep 2024 03:29:07 -0700 Subject: [PATCH 4/6] Added more Tailwind showndown notes. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 50d34b9..d166e3a 100644 --- a/README.md +++ b/README.md @@ -107,8 +107,8 @@ Tailwind verbosity goes up with more child elements. ### CSS variables and child elements At first glance, **Tailwind Example 2** looks very promising! Exciting ...but: -* 🔴 **Every child style requires a selector** - shorthand style advantage sadly disappears. - * This trivial example is the best case scenario for Tailwind. +* 🔴 **Every child style requires an explicit selector** - shorthand advantages sadly disappear. + * This small example is the best case scenario for Tailwind. Every new child style past this point will be longer than vanilla CSS. * 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful. ```html From 42a2e2ade70e068c7db2afe591dc9acc18d7008c Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 6 Sep 2024 03:38:27 -0700 Subject: [PATCH 5/6] Added more Tailwind showndown notes. --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d166e3a..a51c298 100644 --- a/README.md +++ b/README.md @@ -107,8 +107,10 @@ Tailwind verbosity goes up with more child elements. ### CSS variables and child elements At first glance, **Tailwind Example 2** looks very promising! Exciting ...but: -* 🔴 **Every child style requires an explicit selector** - shorthand advantages sadly disappear. - * This small example is the best case scenario for Tailwind. Every new child style past this point will be longer than vanilla CSS. +* 🔴 **Every child style requires an explicit selector.** + * Tailwinds' shorthand advantages sadly disappear. + * Any more child styles added in Tailwind will become longer than vanilla CSS. + * This limited example is the best case scenario for Tailwind. * 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful. ```html From 4793a38ddb6d074f65a47058823782e3fed2e001 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Fri, 13 Sep 2024 12:16:21 -0700 Subject: [PATCH 6/6] Updated link for keyframe scoping --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a51c298..0347674 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ * Hate creating unique class names over.. and over.. to use once. * You want to co-locate your styles for ⚡️ [Locality of Behavior (LoB)](https://htmx.org/essays/locality-of-behaviour/) * You wish `this` would work in `` tags. -* Want all CSS features: [Nesting](https://caniuse.com/css-nesting), animations. Get scoped [`@keyframes`](https://github.com/gnat/css-scope-inline/blob/main/example.html#L86)! +* Want all CSS features: [Nesting](https://caniuse.com/css-nesting), animations. Get scoped [`@keyframes`](https://github.com/gnat/css-scope-inline/blob/main/example.html#L50)! * You wish `@media` queries were shorter for [responsive design](https://tailwindcss.com/docs/responsive-design). * Only 16 lines. No build step. No dependencies. * Pairs well with [htmx](https://htmx.org) and [Surreal](https://github.com/gnat/surreal)