Skip to content

Commit d1af267

Browse files
authored
Notes in vs Tailwind section.
1 parent 4793a38 commit d1af267

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

README.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,16 @@ Or, 🌐 CDN: `<script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@ma
4747

4848
Use whatever you'd like, but there's a few advantages with this approach over Tailwind, Twind, UnoCSS:
4949

50-
* No more [repeating styles](https://tailwindcss.com/docs/reusing-styles) on child elements (..no [@apply](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply), no `[&>thing]` per style). It's just CSS!
50+
* No [repeat styles](https://tailwindcss.com/docs/reusing-styles) on child elements (..no [@apply](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply), no `[&>thing]` on each style).
5151
* No endless visual noise on every `<div>`. Use a local `<style>` per group.
52+
* No difference in syntax between local and global styles. Universal CSS.
53+
* Regain your "inspect, play with styles, paste" workflow in your web browser!
54+
* No suffering from lost syntax highlighting on properties and units.
5255
* No high risk of eventually requiring a build step.
5356
* No chance of [deprecations](https://windicss.org/posts/sunsetting.html). 16 lines is infinitely maintainable.
54-
* Get the ultra-fast "inspect, play with styles, paste" workflow back.
55-
* No suffering from missing syntax highlighting on properties and units.
5657
* No suffering from FOUC (a flash of unstyled content).
5758
* Zero friction movement of styles between inline and `.css` files. Just replace `me`
58-
* No special tooling or plugins to install. Universal vanilla CSS.
59+
* No special tooling or plugins to install.
5960

6061
## ⚡ Workflow Tips
6162

@@ -79,8 +80,8 @@ Tailwind verbosity goes up with more child elements.
7980
<style>
8081
me { background: red; }
8182
me div { background: green; }
82-
me div[n1] { background: yellow; }
83-
me div[n2] { background: blue; }
83+
me [n1] { background: yellow; }
84+
me [n2] { background: blue; }
8485
</style>
8586
red
8687
<div>green</div>

0 commit comments

Comments
 (0)