├── part-1
└── blog-starter-template.html
├── part-2
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── styles.css
├── tailwind.config.js
└── tailwind.css
├── part-3
├── README.md
├── article.html
├── grids.html
├── package-lock.json
├── package.json
├── styles.css
├── tailwind.config.js
└── tailwind.css
├── part-4
├── README.md
├── brand-colors-preset.js
├── index.html
├── package-lock.json
├── package.json
├── styles.css
├── tailwind.config.js
└── tailwind.css
└── part-5
├── README.md
├── examples
├── arrows.html
├── counters.html
└── typography.html
├── package-lock.json
├── package.json
├── plugins
├── arrows.js
└── counters.js
├── styles.css
├── tailwind.config.js
└── tailwind.css
/part-1/blog-starter-template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
31 |
109 |
110 |
111 |
Want to stay up-to-date?
112 | Join our mail list for hot news & new tutorials
113 |
114 |
115 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
ABOUT US
126 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.
127 |
128 |
129 |
130 |
CONTACT US
131 |
132 | A108 Adam Street Phone: +1 5589 55488 55 Email: info@webcraft.com
137 |
138 |
139 |
140 |
142 |
143 |
144 |
145 |
146 |
148 |
149 |
150 |
151 |
152 |
SAY HELLO!
153 |
158 |
159 |
161 |
12 |
18 |
19 |
20 |
22 |
23 |
45 |
46 |
47 |
48 |
Info
49 |
Lorem ipsum dolor sit amet consectetur adipisicing elit.
50 |
52 |
Warning
53 |
Lorem ipsum dolor sit amet consectetur adipisicing elit.
54 |
57 |
66 |
67 |
68 |
69 |
70 |
71 |
Dark mode in action! Click me to toggle between light and dark modes...
72 |
73 | Lorem ipsum...
74 |
75 |
76 |
10 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius vitae ipsum et commodo. In scelerisque est magna, ut fringilla purus congue eu. Mauris id metus ac metus porta aliquet. Aliquam quam ipsum, consequat malesuada lectus nec, blandit condimentum enim. Donec varius mattis facilisis. Morbi rhoncus erat vel erat pellentesque suscipit. Nunc dictum euismod libero sed tristique.
11 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius vitae ipsum et commodo. In scelerisque est magna, ut fringilla purus congue eu. Mauris id metus ac metus porta aliquet.
12 |
Aliquam id nulla dignissim felis bibendum aliquam. Cras vulputate blandit semper. Nam quam dolor, tincidunt non odio ac, condimentum molestie justo. In ornare maximus tortor, aliquam consequat arcu sagittis id. Vivamus condimentum varius ante, pulvinar laoreet tortor dignissim ac. Curabitur egestas in arcu sit amet feugiat. Aenean interdum, purus eget sodales tincidunt, magna sem lobortis nunc, at porttitor arcu velit sed augue. Praesent porttitor nisl enim, eget sollicitudin ipsum porta a. Integer tincidunt, lorem sit amet gravida hendrerit, arcu felis convallis metus, vitae vehicula diam dolor vulputate sapien. Nulla finibus lectus nec porta faucibus. Praesent in massa sollicitudin, dignissim quam at, volutpat mauris. Morbi in turpis sapien. Morbi ante est, gravida vitae ipsum quis, pretium scelerisque massa.
13 |
14 |
Vestibulum congue felis at posuere commodo. Praesent sapien magna, aliquet ut efficitur et, luctus at neque. Donec vitae nunc convallis, maximus ex sit amet, consequat tellus. Aenean eleifend cursus urna, sed fermentum felis cursus eget. Sed accumsan hendrerit turpis at ullamcorper. Integer quam sapien, rutrum ac pharetra eget, maximus id lacus. Vivamus sollicitudin molestie hendrerit. Proin sem quam, tempus in felis et, elementum dignissim felis. Integer odio tellus, semper at commodo at, euismod id magna. Aenean nisl metus, maximus a eros sit amet, facilisis malesuada lorem. Mauris est tortor, accumsan ac aliquet et, sagittis vitae velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
15 |
Aenean scelerisque urna id dictum tempor. Pellentesque ipsum orci, convallis eget purus nec, placerat laoreet nulla. Nullam vitae lectus porta, lacinia neque at, rutrum felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, magna eget gravida lobortis, elit elit rutrum urna, at volutpat ex orci accumsan urna. Sed et ligula magna. Ut dignissim semper ligula, at lacinia mi dignissim non. In eleifend ultricies viverra. Nunc euismod ac lacus ac molestie. Nam sem lectus, malesuada a ipsum vitae, viverra condimentum elit. Ut at vulputate tortor, nec suscipit leo. In non dolor nec purus semper tempus:
16 |
17 | First item
18 | Second item
19 | Third item
20 |
21 |
Pellentesque tincidunt non orci id congue. Donec blandit pulvinar leo et tincidunt. Sed venenatis venenatis justo, ut congue neque lobortis sit amet. Nam tempus vehicula nisi, vitae commodo magna condimentum id. In quis vehicula massa. Fusce id congue lorem. Duis imperdiet placerat metus, vitae hendrerit lorem sollicitudin sit amet. Integer varius justo non velit semper elementum. Donec scelerisque magna nibh, at efficitur elit hendrerit id. Aenean sagittis lectus odio, eu varius lectus vestibulum eget. Sed gravida mattis auctor.
22 |
23 |
24 |
25 |
26 |
David Smith
27 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius vitae ipsum et commodo.
28 |
29 |
30 |
21 |
22 |
Grid Layout Examples
23 |
24 |
Example #1
25 |
26 |
27 |
1
28 |
2
29 |
3
30 |
31 |
32 |
Example #2
33 |
34 |
35 |
1
36 |
2
37 |
3
38 |
4
39 |
5
40 |
41 |
42 |
Example #3
43 |
44 |
45 |
1
46 |
2
47 |
3
48 |
4
49 |
5
50 |
6
51 |
52 |
53 |
Example #4
54 |
55 |
56 |
1
57 |
2
58 |
3
59 |
4
60 |
5
61 |
6
62 |
7
63 |
64 |
65 |
66 |
67 |
68 |
1
69 |
2
70 |
3
71 |
4
72 |
5
73 |
6
74 |
7
75 |
76 |
77 |
Example #5
78 |
79 |
80 |
1
81 |
2
82 |
3
83 |
4
84 |
5
85 |
86 |
87 |
12 |
18 |
19 |
20 |
22 |
23 |
45 |
46 |
47 | Main Heading Is Here
48 |
49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis urna vitae sapien volutpat commodo nec in nulla. Cras consectetur lorem pharetra turpis iaculis, vel finibus ante facilisis. Morbi auctor, elit sit amet congue sollicitudin, mi mi aliquam neque, ac condimentum purus leo nec felis. Pellentesque bibendum vel massa vel sodales. Nam semper dolor ac pharetra ultrices. Etiam lectus purus, congue rutrum mi a, gravida finibus ipsum. Donec at auctor orci. Praesent sagittis augue in eleifend volutpat. Integer blandit consequat fermentum.
50 |
51 | Second Heading Is Here
52 |
53 | Donec tempor odio sed sem porttitor, ac sodales dolor ultrices. Phasellus nec enim et nibh vestibulum placerat. Nam sed lobortis tortor. Etiam at ipsum risus. Vestibulum erat elit, iaculis a pulvinar at, interdum nec mi. Aenean in consectetur ipsum, vitae rhoncus arcu. Vestibulum quis sapien nibh. Curabitur feugiat vestibulum lorem, vitae volutpat lectus porttitor tincidunt. Praesent diam sem, ultrices quis nibh luctus, pharetra tristique elit. Donec mattis velit eget nulla hendrerit dictum. Maecenas dictum orci at sagittis interdum. Etiam posuere, eros nec suscipit convallis, mi est tempor purus, congue ultrices ipsum massa nec lectus. Fusce id odio vel diam tristique iaculis. Cras dapibus facilisis suscipit. Donec rutrum molestie nibh, in tempus augue venenatis sed. Pellentesque eget mauris in magna ornare pharetra.
54 |
55 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam non urna in mi dictum tempor. Quisque leo odio, pretium ut egestas eu, pulvinar eget lacus. Nulla quis orci ac dui hendrerit mattis quis a ex. Phasellus facilisis rutrum ante a auctor. Morbi non gravida risus. Integer convallis leo odio, nec pulvinar magna condimentum eleifend. Cras at massa a libero mattis vestibulum eget ac purus. Pellentesque at libero eget sem sollicitudin interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam nulla sapien, venenatis nec elit accumsan, laoreet mattis ligula. Sed faucibus vitae ex sed ultricies. Nulla odio nisi, pretium eget lacus nec, dapibus luctus nunc. Vestibulum consequat est at risus faucibus consequat. Curabitur iaculis lorem eget rutrum fermentum. Ut pulvinar condimentum dignissim.
56 |
57 |
62 |
63 |
--------------------------------------------------------------------------------
/part-4/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwind-part-4",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npx tailwindcss -i styles.css -o tailwind.css",
8 | "dev:watch": "npx tailwindcss -i styles.css -o tailwind.css -w"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "tailwindcss": "^3.0.23"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/part-4/styles.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | h1 {
7 | @apply text-2xl;
8 | }
9 | h2 {
10 | @apply text-xl;
11 | }
12 | h1, h2, p {
13 | @apply my-6 mx-4;
14 | }
15 | }
--------------------------------------------------------------------------------
/part-4/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./index.html'],
3 | presets: [
4 | require('./brand-colors-preset.js')
5 | ],
6 | theme: {
7 | screens: {
8 | 'phone': '640px',
9 | 'tablet': '768px',
10 | 'laptop': '1024px',
11 | 'desktop': '1280px',
12 | },
13 | extend: {
14 | spacing: {
15 | '4.5': '1.125rem',
16 | '5.5': '1.375rem',
17 | '6.5': '1.625rem',
18 | '7.5': '1.875rem',
19 | '8.5': '2.125rem',
20 | '9.5': '2.375rem',
21 | },
22 | fontFamily: {
23 | 'display': ['"Carter One"'],
24 | }
25 | }
26 | },
27 | plugins: [],
28 | }
--------------------------------------------------------------------------------
/part-4/tailwind.css:
--------------------------------------------------------------------------------
1 | /*
2 | ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
3 | */
4 |
5 | /*
6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8 | */
9 |
10 | *,
11 | ::before,
12 | ::after {
13 | box-sizing: border-box;
14 | /* 1 */
15 | border-width: 0;
16 | /* 2 */
17 | border-style: solid;
18 | /* 2 */
19 | border-color: #e5e7eb;
20 | /* 2 */
21 | }
22 |
23 | ::before,
24 | ::after {
25 | --tw-content: '';
26 | }
27 |
28 | /*
29 | 1. Use a consistent sensible line-height in all browsers.
30 | 2. Prevent adjustments of font size after orientation changes in iOS.
31 | 3. Use a more readable tab size.
32 | 4. Use the user's configured `sans` font-family by default.
33 | */
34 |
35 | html {
36 | line-height: 1.5;
37 | /* 1 */
38 | -webkit-text-size-adjust: 100%;
39 | /* 2 */
40 | -moz-tab-size: 4;
41 | /* 3 */
42 | -o-tab-size: 4;
43 | tab-size: 4;
44 | /* 3 */
45 | 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";
46 | /* 4 */
47 | }
48 |
49 | /*
50 | 1. Remove the margin in all browsers.
51 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
52 | */
53 |
54 | body {
55 | margin: 0;
56 | /* 1 */
57 | line-height: inherit;
58 | /* 2 */
59 | }
60 |
61 | /*
62 | 1. Add the correct height in Firefox.
63 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
64 | 3. Ensure horizontal rules are visible by default.
65 | */
66 |
67 | hr {
68 | height: 0;
69 | /* 1 */
70 | color: inherit;
71 | /* 2 */
72 | border-top-width: 1px;
73 | /* 3 */
74 | }
75 |
76 | /*
77 | Add the correct text decoration in Chrome, Edge, and Safari.
78 | */
79 |
80 | abbr:where([title]) {
81 | -webkit-text-decoration: underline dotted;
82 | text-decoration: underline dotted;
83 | }
84 |
85 | /*
86 | Remove the default font size and weight for headings.
87 | */
88 |
89 | h1,
90 | h2,
91 | h3,
92 | h4,
93 | h5,
94 | h6 {
95 | font-size: inherit;
96 | font-weight: inherit;
97 | }
98 |
99 | /*
100 | Reset links to optimize for opt-in styling instead of opt-out.
101 | */
102 |
103 | a {
104 | color: inherit;
105 | text-decoration: inherit;
106 | }
107 |
108 | /*
109 | Add the correct font weight in Edge and Safari.
110 | */
111 |
112 | b,
113 | strong {
114 | font-weight: bolder;
115 | }
116 |
117 | /*
118 | 1. Use the user's configured `mono` font family by default.
119 | 2. Correct the odd `em` font sizing in all browsers.
120 | */
121 |
122 | code,
123 | kbd,
124 | samp,
125 | pre {
126 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
127 | /* 1 */
128 | font-size: 1em;
129 | /* 2 */
130 | }
131 |
132 | /*
133 | Add the correct font size in all browsers.
134 | */
135 |
136 | small {
137 | font-size: 80%;
138 | }
139 |
140 | /*
141 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
142 | */
143 |
144 | sub,
145 | sup {
146 | font-size: 75%;
147 | line-height: 0;
148 | position: relative;
149 | vertical-align: baseline;
150 | }
151 |
152 | sub {
153 | bottom: -0.25em;
154 | }
155 |
156 | sup {
157 | top: -0.5em;
158 | }
159 |
160 | /*
161 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
162 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
163 | 3. Remove gaps between table borders by default.
164 | */
165 |
166 | table {
167 | text-indent: 0;
168 | /* 1 */
169 | border-color: inherit;
170 | /* 2 */
171 | border-collapse: collapse;
172 | /* 3 */
173 | }
174 |
175 | /*
176 | 1. Change the font styles in all browsers.
177 | 2. Remove the margin in Firefox and Safari.
178 | 3. Remove default padding in all browsers.
179 | */
180 |
181 | button,
182 | input,
183 | optgroup,
184 | select,
185 | textarea {
186 | font-family: inherit;
187 | /* 1 */
188 | font-size: 100%;
189 | /* 1 */
190 | line-height: inherit;
191 | /* 1 */
192 | color: inherit;
193 | /* 1 */
194 | margin: 0;
195 | /* 2 */
196 | padding: 0;
197 | /* 3 */
198 | }
199 |
200 | /*
201 | Remove the inheritance of text transform in Edge and Firefox.
202 | */
203 |
204 | button,
205 | select {
206 | text-transform: none;
207 | }
208 |
209 | /*
210 | 1. Correct the inability to style clickable types in iOS and Safari.
211 | 2. Remove default button styles.
212 | */
213 |
214 | button,
215 | [type='button'],
216 | [type='reset'],
217 | [type='submit'] {
218 | -webkit-appearance: button;
219 | /* 1 */
220 | background-color: transparent;
221 | /* 2 */
222 | background-image: none;
223 | /* 2 */
224 | }
225 |
226 | /*
227 | Use the modern Firefox focus style for all focusable elements.
228 | */
229 |
230 | :-moz-focusring {
231 | outline: auto;
232 | }
233 |
234 | /*
235 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
236 | */
237 |
238 | :-moz-ui-invalid {
239 | box-shadow: none;
240 | }
241 |
242 | /*
243 | Add the correct vertical alignment in Chrome and Firefox.
244 | */
245 |
246 | progress {
247 | vertical-align: baseline;
248 | }
249 |
250 | /*
251 | Correct the cursor style of increment and decrement buttons in Safari.
252 | */
253 |
254 | ::-webkit-inner-spin-button,
255 | ::-webkit-outer-spin-button {
256 | height: auto;
257 | }
258 |
259 | /*
260 | 1. Correct the odd appearance in Chrome and Safari.
261 | 2. Correct the outline style in Safari.
262 | */
263 |
264 | [type='search'] {
265 | -webkit-appearance: textfield;
266 | /* 1 */
267 | outline-offset: -2px;
268 | /* 2 */
269 | }
270 |
271 | /*
272 | Remove the inner padding in Chrome and Safari on macOS.
273 | */
274 |
275 | ::-webkit-search-decoration {
276 | -webkit-appearance: none;
277 | }
278 |
279 | /*
280 | 1. Correct the inability to style clickable types in iOS and Safari.
281 | 2. Change font properties to `inherit` in Safari.
282 | */
283 |
284 | ::-webkit-file-upload-button {
285 | -webkit-appearance: button;
286 | /* 1 */
287 | font: inherit;
288 | /* 2 */
289 | }
290 |
291 | /*
292 | Add the correct display in Chrome and Safari.
293 | */
294 |
295 | summary {
296 | display: list-item;
297 | }
298 |
299 | /*
300 | Removes the default spacing and border for appropriate elements.
301 | */
302 |
303 | blockquote,
304 | dl,
305 | dd,
306 | h1,
307 | h2,
308 | h3,
309 | h4,
310 | h5,
311 | h6,
312 | hr,
313 | figure,
314 | p,
315 | pre {
316 | margin: 0;
317 | }
318 |
319 | fieldset {
320 | margin: 0;
321 | padding: 0;
322 | }
323 |
324 | legend {
325 | padding: 0;
326 | }
327 |
328 | ol,
329 | ul,
330 | menu {
331 | list-style: none;
332 | margin: 0;
333 | padding: 0;
334 | }
335 |
336 | /*
337 | Prevent resizing textareas horizontally by default.
338 | */
339 |
340 | textarea {
341 | resize: vertical;
342 | }
343 |
344 | /*
345 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
346 | 2. Set the default placeholder color to the user's configured gray 400 color.
347 | */
348 |
349 | input::-moz-placeholder, textarea::-moz-placeholder {
350 | opacity: 1;
351 | /* 1 */
352 | color: #9ca3af;
353 | /* 2 */
354 | }
355 |
356 | input:-ms-input-placeholder, textarea:-ms-input-placeholder {
357 | opacity: 1;
358 | /* 1 */
359 | color: #9ca3af;
360 | /* 2 */
361 | }
362 |
363 | input::placeholder,
364 | textarea::placeholder {
365 | opacity: 1;
366 | /* 1 */
367 | color: #9ca3af;
368 | /* 2 */
369 | }
370 |
371 | /*
372 | Set the default cursor for buttons.
373 | */
374 |
375 | button,
376 | [role="button"] {
377 | cursor: pointer;
378 | }
379 |
380 | /*
381 | Make sure disabled buttons don't get the pointer cursor.
382 | */
383 |
384 | :disabled {
385 | cursor: default;
386 | }
387 |
388 | /*
389 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
390 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
391 | This can trigger a poorly considered lint error in some tools but is included by design.
392 | */
393 |
394 | img,
395 | svg,
396 | video,
397 | canvas,
398 | audio,
399 | iframe,
400 | embed,
401 | object {
402 | display: block;
403 | /* 1 */
404 | vertical-align: middle;
405 | /* 2 */
406 | }
407 |
408 | /*
409 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
410 | */
411 |
412 | img,
413 | video {
414 | max-width: 100%;
415 | height: auto;
416 | }
417 |
418 | /*
419 | Ensure the default browser behavior of the `hidden` attribute.
420 | */
421 |
422 | [hidden] {
423 | display: none;
424 | }
425 |
426 | h1 {
427 | font-size: 1.5rem;
428 | line-height: 2rem;
429 | }
430 |
431 | h2 {
432 | font-size: 1.25rem;
433 | line-height: 1.75rem;
434 | }
435 |
436 | h1, h2, p {
437 | margin-top: 1.5rem;
438 | margin-bottom: 1.5rem;
439 | margin-left: 1rem;
440 | margin-right: 1rem;
441 | }
442 |
443 | *, ::before, ::after {
444 | --tw-translate-x: 0;
445 | --tw-translate-y: 0;
446 | --tw-rotate: 0;
447 | --tw-skew-x: 0;
448 | --tw-skew-y: 0;
449 | --tw-scale-x: 1;
450 | --tw-scale-y: 1;
451 | --tw-pan-x: ;
452 | --tw-pan-y: ;
453 | --tw-pinch-zoom: ;
454 | --tw-scroll-snap-strictness: proximity;
455 | --tw-ordinal: ;
456 | --tw-slashed-zero: ;
457 | --tw-numeric-figure: ;
458 | --tw-numeric-spacing: ;
459 | --tw-numeric-fraction: ;
460 | --tw-ring-inset: ;
461 | --tw-ring-offset-width: 0px;
462 | --tw-ring-offset-color: #fff;
463 | --tw-ring-color: rgb(59 130 246 / 0.5);
464 | --tw-ring-offset-shadow: 0 0 #0000;
465 | --tw-ring-shadow: 0 0 #0000;
466 | --tw-shadow: 0 0 #0000;
467 | --tw-shadow-colored: 0 0 #0000;
468 | --tw-blur: ;
469 | --tw-brightness: ;
470 | --tw-contrast: ;
471 | --tw-grayscale: ;
472 | --tw-hue-rotate: ;
473 | --tw-invert: ;
474 | --tw-saturate: ;
475 | --tw-sepia: ;
476 | --tw-drop-shadow: ;
477 | --tw-backdrop-blur: ;
478 | --tw-backdrop-brightness: ;
479 | --tw-backdrop-contrast: ;
480 | --tw-backdrop-grayscale: ;
481 | --tw-backdrop-hue-rotate: ;
482 | --tw-backdrop-invert: ;
483 | --tw-backdrop-opacity: ;
484 | --tw-backdrop-saturate: ;
485 | --tw-backdrop-sepia: ;
486 | }
487 |
488 | .my-2 {
489 | margin-top: 0.5rem;
490 | margin-bottom: 0.5rem;
491 | }
492 |
493 | .ml-6 {
494 | margin-left: 1.5rem;
495 | }
496 |
497 | .ml-1 {
498 | margin-left: 0.25rem;
499 | }
500 |
501 | .mr-4 {
502 | margin-right: 1rem;
503 | }
504 |
505 | .mr-5\.5 {
506 | margin-right: 1.375rem;
507 | }
508 |
509 | .mr-5 {
510 | margin-right: 1.25rem;
511 | }
512 |
513 | .flex {
514 | display: flex;
515 | }
516 |
517 | .hidden {
518 | display: none;
519 | }
520 |
521 | .w-full {
522 | width: 100%;
523 | }
524 |
525 | .flex-shrink-0 {
526 | flex-shrink: 0;
527 | }
528 |
529 | .cursor-default {
530 | cursor: default;
531 | }
532 |
533 | .flex-wrap {
534 | flex-wrap: wrap;
535 | }
536 |
537 | .items-center {
538 | align-items: center;
539 | }
540 |
541 | .justify-between {
542 | justify-content: space-between;
543 | }
544 |
545 | .rounded {
546 | border-radius: 0.25rem;
547 | }
548 |
549 | .border {
550 | border-width: 1px;
551 | }
552 |
553 | .border-neutral-600 {
554 | --tw-border-opacity: 1;
555 | border-color: rgb(75 85 99 / var(--tw-border-opacity));
556 | }
557 |
558 | .border-primary-500 {
559 | --tw-border-opacity: 1;
560 | border-color: rgb(234 179 8 / var(--tw-border-opacity));
561 | }
562 |
563 | .bg-neutral-800 {
564 | --tw-bg-opacity: 1;
565 | background-color: rgb(31 41 55 / var(--tw-bg-opacity));
566 | }
567 |
568 | .p-2 {
569 | padding: 0.5rem;
570 | }
571 |
572 | .p-1 {
573 | padding: 0.25rem;
574 | }
575 |
576 | .py-4 {
577 | padding-top: 1rem;
578 | padding-bottom: 1rem;
579 | }
580 |
581 | .pl-6 {
582 | padding-left: 1.5rem;
583 | }
584 |
585 | .font-display {
586 | font-family: "Carter One";
587 | }
588 |
589 | .text-3xl {
590 | font-size: 1.875rem;
591 | line-height: 2.25rem;
592 | }
593 |
594 | .font-semibold {
595 | font-weight: 600;
596 | }
597 |
598 | .text-primary-500 {
599 | --tw-text-opacity: 1;
600 | color: rgb(234 179 8 / var(--tw-text-opacity));
601 | }
602 |
603 | .text-secondary-200 {
604 | --tw-text-opacity: 1;
605 | color: rgb(191 219 254 / var(--tw-text-opacity));
606 | }
607 |
608 | .text-white {
609 | --tw-text-opacity: 1;
610 | color: rgb(255 255 255 / var(--tw-text-opacity));
611 | }
612 |
613 | .hover\:border-secondary-200:hover {
614 | --tw-border-opacity: 1;
615 | border-color: rgb(191 219 254 / var(--tw-border-opacity));
616 | }
617 |
618 | .hover\:text-secondary-300:hover {
619 | --tw-text-opacity: 1;
620 | color: rgb(147 197 253 / var(--tw-text-opacity));
621 | }
622 |
623 | @media (min-width: 768px) {
624 | .tablet\:block {
625 | display: block;
626 | }
627 |
628 | .tablet\:flex {
629 | display: flex;
630 | }
631 |
632 | .tablet\:hidden {
633 | display: none;
634 | }
635 |
636 | .tablet\:w-auto {
637 | width: auto;
638 | }
639 |
640 | .tablet\:border-b-2 {
641 | border-bottom-width: 2px;
642 | }
643 | }
--------------------------------------------------------------------------------
/part-5/README.md:
--------------------------------------------------------------------------------
1 | # Working with Tailwind Plugins
2 |
3 | Project setup instructions:
4 |
5 | 1. Run `npm install` to install the dependencies.
6 | 1. Run `npm run dev` to build the styles.
7 | 1. Run `npm run dev:watch` to automatically build the styles on every change.
--------------------------------------------------------------------------------
/part-5/examples/arrows.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CSS Arrows Example
8 | Tree-View Dynamic List with CSS Arrows:
12 |
13 | JavaScript
14 |
15 | Node
16 | React
17 | Vue
18 |
19 | Nuxt
20 | Vuetify
21 | Quasar
22 |
23 | Components
24 | Composables
25 | Directives
26 |
27 |
29 |
31 |
33 |
34 |
46 |
47 |
--------------------------------------------------------------------------------
/part-5/examples/counters.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CSS Counters Example
8 |
12 |
Counters Based on Heading Elements:
13 |
Web Development Languages
14 |
HTML
15 |
CSS
16 |
Tailwind
17 |
Bootstrap
18 |
JavaScript
19 |
Node
20 |
Express
21 |
Vue
22 |
Vuetify
23 |
Nuxt
24 |
25 |
Counters Based on Class Utilities:
26 |
27 |
HTML
28 |
CSS
29 |
JavaScript
30 |
31 |
Node
32 |
React
33 |
Vue
34 |
35 |
Nuxt
36 |
Vuetify
37 |
38 |
39 |
40 |
Tailwind Typography Plugin Example
7 |
11 |
22 | Some Nice Title Here
23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius vitae ipsum et commodo. In scelerisque est magna, ut fringilla purus congue eu. Mauris id metus ac metus porta aliquet. Aliquam quam ipsum, consequat malesuada lectus nec, blandit condimentum enim.
24 | 1. A Heading 2 Here
25 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius vitae ipsum et commodo."
Aliquam id nulla dignissim felis bibendum aliquam. Cras vulputate blandit semper. Nam quam dolor, tincidunt non odio ac, condimentum molestie justo. In ornare maximus tortor, aliquam consequat arcu sagittis id.
27 |
28 | Donec blandit pulvinar leo et tincidunt.
30 |
31 | 2. Another Heading 2 Here
32 | Vestibulum congue felis at posuere commodo. Praesent sapien magna, aliquet ut efficitur et, luctus at neque. Donec vitae nunc convallis, maximus ex sit amet, consequat tellus. Aenean eleifend cursus urna, sed fermentum felis cursus eget. Sed accumsan hendrerit turpis at ullamcorper. Integer quam sapien, rutrum ac pharetra eget, maximus id lacus.
33 |
34 | List item
35 | List item
36 | List item
37 |
38 | Aenean scelerisque urna id dictum tempor. Pellentesque ipsum orci, convallis eget purus nec, placerat laoreet nulla. Nullam vitae lectus porta, lacinia neque at, rutrum felis.
39 |
40 | First item
41 | Second item
42 | Third item
43 |
44 | Pellentesque tincidunt non orci id congue. Donec blandit pulvinar leo et tincidunt. Sed venenatis venenatis justo, ut congue neque lobortis sit amet. Nam tempus vehicula nisi, vitae commodo magna condimentum id.
45 |
46 |
36 |
37 | 
49 |
50 | 
62 |
63 | 
14 | 
25 |