Skip to content

Commit 936adbe

Browse files
KryptonScriptKryptonScript
committed
tailwind css
1 parent 54ec216 commit 936adbe

52 files changed

Lines changed: 8811 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

simple-tailwind-starter/.gitignore renamed to functions-directive/.gitignore

File renamed without changes.

‎functions-directive/.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"css.lint.unknownAtRules": "ignore"
3+
}
4+

simple-tailwind-starter/package-lock.json renamed to functions-directive/package-lock.json

File renamed without changes.

simple-tailwind-starter/package.json renamed to functions-directive/package.json

File renamed without changes.

‎functions-directive/src/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Simple Tailwind Starter</title>
8+
<link rel="stylesheet" href="./output.css">
9+
</head>
10+
11+
<body>
12+
<h1>Hello Universe!</h1>
13+
<h2>I am happy!</h2>
14+
<button class="btn-blue">Here</button>
15+
<div class="content-area">
16+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis optio perferendis voluptatem aperiam nisi,
17+
quis accusantium ad distinctio repellat omnis excepturi! Nam aspernatur voluptatem officia harum laboriosam
18+
itaque, ipsa incidunt porro cupiditate. Facilis nisi magnam minus doloremque. In, consectetur. Ex
19+
perspiciatis impedit eligendi at soluta alias autem temporibus odit laudantium?</p>
20+
</div>
21+
</body>
22+
23+
</html>

‎functions-directive/src/input.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--spacing-128: 16rem;
5+
--breakpoint-xl: 1280px;
6+
}
7+
8+
@layer base {
9+
h1 {
10+
@apply text-4xl;
11+
}
12+
13+
h2 {
14+
@apply text-xl;
15+
}
16+
}
17+
18+
@layer components {
19+
.btn-blue {
20+
@apply bg-blue-500 py-2 px-4 rounded-xl font-bold text-white hover:bg-blue-700;
21+
}
22+
}
23+
24+
.content-area {
25+
@apply bg-green-200;
26+
height: theme('spacing-128');
27+
}
28+
29+
@media (width >= theme(--breakpoint-xl)) {
30+
body {
31+
@apply bg-black text-white;
32+
}
33+
}

‎functions-directive/src/output.css‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2+
@layer properties;
3+
@layer theme, base, components, utilities;
4+
@layer theme {
5+
:root, :host {
6+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9+
"Courier New", monospace;
10+
--color-green-200: oklch(92.5% 0.084 155.995);
11+
--color-blue-500: oklch(62.3% 0.214 259.815);
12+
--color-blue-700: oklch(48.8% 0.243 264.376);
13+
--color-black: #000;
14+
--color-white: #fff;
15+
--spacing: 0.25rem;
16+
--text-xl: 1.25rem;
17+
--text-xl--line-height: calc(1.75 / 1.25);
18+
--text-4xl: 2.25rem;
19+
--text-4xl--line-height: calc(2.5 / 2.25);
20+
--font-weight-bold: 700;
21+
--radius-xl: 0.75rem;
22+
--default-font-family: var(--font-sans);
23+
--default-mono-font-family: var(--font-mono);
24+
}
25+
}
26+
@layer base {
27+
*, ::after, ::before, ::backdrop, ::file-selector-button {
28+
box-sizing: border-box;
29+
margin: 0;
30+
padding: 0;
31+
border: 0 solid;
32+
}
33+
html, :host {
34+
line-height: 1.5;
35+
-webkit-text-size-adjust: 100%;
36+
tab-size: 4;
37+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
38+
font-feature-settings: var(--default-font-feature-settings, normal);
39+
font-variation-settings: var(--default-font-variation-settings, normal);
40+
-webkit-tap-highlight-color: transparent;
41+
}
42+
hr {
43+
height: 0;
44+
color: inherit;
45+
border-top-width: 1px;
46+
}
47+
abbr:where([title]) {
48+
-webkit-text-decoration: underline dotted;
49+
text-decoration: underline dotted;
50+
}
51+
h1, h2, h3, h4, h5, h6 {
52+
font-size: inherit;
53+
font-weight: inherit;
54+
}
55+
a {
56+
color: inherit;
57+
-webkit-text-decoration: inherit;
58+
text-decoration: inherit;
59+
}
60+
b, strong {
61+
font-weight: bolder;
62+
}
63+
code, kbd, samp, pre {
64+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
65+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
66+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
67+
font-size: 1em;
68+
}
69+
small {
70+
font-size: 80%;
71+
}
72+
sub, sup {
73+
font-size: 75%;
74+
line-height: 0;
75+
position: relative;
76+
vertical-align: baseline;
77+
}
78+
sub {
79+
bottom: -0.25em;
80+
}
81+
sup {
82+
top: -0.5em;
83+
}
84+
table {
85+
text-indent: 0;
86+
border-color: inherit;
87+
border-collapse: collapse;
88+
}
89+
:-moz-focusring {
90+
outline: auto;
91+
}
92+
progress {
93+
vertical-align: baseline;
94+
}
95+
summary {
96+
display: list-item;
97+
}
98+
ol, ul, menu {
99+
list-style: none;
100+
}
101+
img, svg, video, canvas, audio, iframe, embed, object {
102+
display: block;
103+
vertical-align: middle;
104+
}
105+
img, video {
106+
max-width: 100%;
107+
height: auto;
108+
}
109+
button, input, select, optgroup, textarea, ::file-selector-button {
110+
font: inherit;
111+
font-feature-settings: inherit;
112+
font-variation-settings: inherit;
113+
letter-spacing: inherit;
114+
color: inherit;
115+
border-radius: 0;
116+
background-color: transparent;
117+
opacity: 1;
118+
}
119+
:where(select:is([multiple], [size])) optgroup {
120+
font-weight: bolder;
121+
}
122+
:where(select:is([multiple], [size])) optgroup option {
123+
padding-inline-start: 20px;
124+
}
125+
::file-selector-button {
126+
margin-inline-end: 4px;
127+
}
128+
::placeholder {
129+
opacity: 1;
130+
}
131+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
132+
::placeholder {
133+
color: currentcolor;
134+
@supports (color: color-mix(in lab, red, red)) {
135+
color: color-mix(in oklab, currentcolor 50%, transparent);
136+
}
137+
}
138+
}
139+
textarea {
140+
resize: vertical;
141+
}
142+
::-webkit-search-decoration {
143+
-webkit-appearance: none;
144+
}
145+
::-webkit-date-and-time-value {
146+
min-height: 1lh;
147+
text-align: inherit;
148+
}
149+
::-webkit-datetime-edit {
150+
display: inline-flex;
151+
}
152+
::-webkit-datetime-edit-fields-wrapper {
153+
padding: 0;
154+
}
155+
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
156+
padding-block: 0;
157+
}
158+
::-webkit-calendar-picker-indicator {
159+
line-height: 1;
160+
}
161+
:-moz-ui-invalid {
162+
box-shadow: none;
163+
}
164+
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
165+
appearance: button;
166+
}
167+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
168+
height: auto;
169+
}
170+
[hidden]:where(:not([hidden="until-found"])) {
171+
display: none !important;
172+
}
173+
}
174+
@layer utilities;
175+
@layer base {
176+
h1 {
177+
font-size: var(--text-4xl);
178+
line-height: var(--tw-leading, var(--text-4xl--line-height));
179+
}
180+
h2 {
181+
font-size: var(--text-xl);
182+
line-height: var(--tw-leading, var(--text-xl--line-height));
183+
}
184+
}
185+
@layer components {
186+
.btn-blue {
187+
border-radius: var(--radius-xl);
188+
background-color: var(--color-blue-500);
189+
padding-inline: calc(var(--spacing) * 4);
190+
padding-block: calc(var(--spacing) * 2);
191+
--tw-font-weight: var(--font-weight-bold);
192+
font-weight: var(--font-weight-bold);
193+
color: var(--color-white);
194+
&:hover {
195+
@media (hover: hover) {
196+
background-color: var(--color-blue-700);
197+
}
198+
}
199+
}
200+
}
201+
.content-area {
202+
background-color: var(--color-green-200);
203+
height: 16rem;
204+
}
205+
@media (width >= 1280px) {
206+
body {
207+
background-color: var(--color-black);
208+
color: var(--color-white);
209+
}
210+
}
211+
@property --tw-font-weight {
212+
syntax: "*";
213+
inherits: false;
214+
}
215+
@layer properties {
216+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
217+
*, ::before, ::after, ::backdrop {
218+
--tw-font-weight: initial;
219+
}
220+
}
221+
}

‎functions-directive/tailwind.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
content: ['./*.html'],
3+
theme: {
4+
extend: {
5+
spacing: {
6+
128: '32rem'
7+
}
8+
},
9+
},
10+
plugins: [],
11+
}

‎tailwindcss/simple-tailwind-starter/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

0 commit comments

Comments
 (0)