diff --git a/README.md b/README.md index deece2b..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) @@ -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 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. @@ -103,7 +104,14 @@ 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 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