learning
/
tailwind_yt_tut
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Save it

Browse Source
master
Drew Bednar 4 months ago
parent 12eb2c20ac
commit 691f5cddac
2 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File

3
.gitignore vendored
Unescape Escape View File

@ -1 +1,2 @@
node_modules/ node_modules/
.vscode/

92
css/main.css
Unescape Escape View File

@ -40,7 +40,7 @@ html {
-moz-tab-size: 4; -moz-tab-size: 4;
/* 3 */ /* 3 */
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
/* 3 */ /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */ /* 4 */
@ -79,7 +79,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
abbr:where([title]) { abbr:where([title]) {
-webkit-text-decoration: underline dotted; -webkit-text-decoration: underline dotted;
text-decoration: underline dotted; text-decoration: underline dotted;
} }
/* /*
@ -346,14 +346,16 @@ textarea {
2. Set the default placeholder color to the user's configured gray 400 color. 2. Set the default placeholder color to the user's configured gray 400 color.
*/ */
input::-moz-placeholder, textarea::-moz-placeholder { input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1; opacity: 1;
/* 1 */ /* 1 */
color: #9ca3af; color: #9ca3af;
/* 2 */ /* 2 */
} }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
opacity: 1; opacity: 1;
/* 1 */ /* 1 */
color: #9ca3af; color: #9ca3af;
@ -423,7 +425,9 @@ Ensure the default browser behavior of the `hidden` attribute.
display: none; display: none;
} }
*, ::before, ::after { *,
::before,
::after {
--tw-translate-x: 0; --tw-translate-x: 0;
--tw-translate-y: 0; --tw-translate-y: 0;
--tw-rotate: 0; --tw-rotate: 0;
@ -431,16 +435,16 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-skew-y: 0; --tw-skew-y: 0;
--tw-scale-x: 1; --tw-scale-x: 1;
--tw-scale-y: 1; --tw-scale-y: 1;
--tw-pan-x: ; --tw-pan-x: ;
--tw-pan-y: ; --tw-pan-y: ;
--tw-pinch-zoom: ; --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity; --tw-scroll-snap-strictness: proximity;
--tw-ordinal: ; --tw-ordinal: ;
--tw-slashed-zero: ; --tw-slashed-zero: ;
--tw-numeric-figure: ; --tw-numeric-figure: ;
--tw-numeric-spacing: ; --tw-numeric-spacing: ;
--tw-numeric-fraction: ; --tw-numeric-fraction: ;
--tw-ring-inset: ; --tw-ring-inset: ;
--tw-ring-offset-width: 0px; --tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff; --tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-color: rgb(59 130 246 / 0.5);
@ -448,24 +452,24 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-ring-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;
--tw-blur: ; --tw-blur: ;
--tw-brightness: ; --tw-brightness: ;
--tw-contrast: ; --tw-contrast: ;
--tw-grayscale: ; --tw-grayscale: ;
--tw-hue-rotate: ; --tw-hue-rotate: ;
--tw-invert: ; --tw-invert: ;
--tw-saturate: ; --tw-saturate: ;
--tw-sepia: ; --tw-sepia: ;
--tw-drop-shadow: ; --tw-drop-shadow: ;
--tw-backdrop-blur: ; --tw-backdrop-blur: ;
--tw-backdrop-brightness: ; --tw-backdrop-brightness: ;
--tw-backdrop-contrast: ; --tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ; --tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ; --tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ; --tw-backdrop-invert: ;
--tw-backdrop-opacity: ; --tw-backdrop-opacity: ;
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.container { .container {
@ -611,61 +615,61 @@ Ensure the default browser behavior of the `hidden` attribute.
justify-content: space-around; justify-content: space-around;
} }
.space-x-6 > :not([hidden]) ~ :not([hidden]) { .space-x-6> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { .space-y-6> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
} }
.space-y-0 > :not([hidden]) ~ :not([hidden]) { .space-y-0> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse)); margin-bottom: calc(0px * var(--tw-space-y-reverse));
} }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { .space-y-12> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse)); margin-bottom: calc(3rem * var(--tw-space-y-reverse));
} }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { .space-y-8> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse)); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
} }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { .space-y-3> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
} }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { .space-x-2> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { .space-x-4> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-x-32 > :not([hidden]) ~ :not([hidden]) { .space-x-32> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(8rem * var(--tw-space-x-reverse)); margin-right: calc(8rem * var(--tw-space-x-reverse));
margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { .space-x-3> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
@ -975,13 +979,13 @@ body {
justify-content: flex-start; justify-content: flex-start;
} }
.md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { .md\:space-y-0> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse)); margin-bottom: calc(0px * var(--tw-space-y-reverse));
} }
.md\:space-x-6 > :not([hidden]) ~ :not([hidden]) { .md\:space-x-6> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));

Write Preview
Loading…
Cancel
Save