You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+39-6Lines changed: 39 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -58,8 +58,40 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
58
58
* Try tools like- Auto complete styles: [VSCode](https://code.visualstudio.com/) or [Sublime](https://packagecontrol.io/packages/Emmet). Auto fold `<style>` and `<script>` in [Sublime](https://packagecontrol.io/packages/Inline%20Fold)
59
59
* These are not for everybody, but you may find them worthwhile.
60
60
61
-
## 👁️ CSS Scope Inline vs Tailwind CSS
62
-
Example using CSS variables and child styling.
61
+
## 👁️ CSS Scope Inline vs Tailwind CSS Showdowns
62
+
### Basics
63
+
```html
64
+
<!-- CSS Scoped Inline -->
65
+
<div>
66
+
<style>
67
+
.me { background: red; }
68
+
.mediv { background: green; }
69
+
.mediv[n1] { background: yellow; }
70
+
.mediv[n2] { background: blue; }
71
+
</style>
72
+
red
73
+
<div>green</div>
74
+
<div>green</div>
75
+
<div>green</div>
76
+
<divn1>yellow</div>
77
+
<divn2>blue</div>
78
+
<div>green</div>
79
+
<div>green</div>
80
+
</div>
81
+
82
+
<!-- Tailwind -->
83
+
<divclass="bg-[red]">
84
+
red
85
+
<divclass="bg-[green]">green</div>
86
+
<divclass="bg-[green]">green</div>
87
+
<divclass="bg-[green]">green</div>
88
+
<divclass="bg-[yellow]">yellow</div>
89
+
<divclass="bg-[blue]">blue</div>
90
+
<divclass="bg-[green]">green</div>
91
+
<divclass="bg-[green]">green</div>
92
+
</div>
93
+
```
94
+
### CSS variables and child styling
63
95
64
96
```html
65
97
<!doctype html>
@@ -76,10 +108,11 @@ Example using CSS variables and child styling.
76
108
<body>
77
109
<!-- CSS Scope Inline -->
78
110
<div>
79
-
<style>.me { margin:8px6px;
80
-
& a { display:block; padding:8px12px; margin:10px0; background:var(--color-1); border-radius:10px; text-align:center; }
0 commit comments