├── .gitignore
├── tailwind.css
├── postcss.config.js
├── tailwind.config.js
├── public
├── index.html
└── styles.css
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules
--------------------------------------------------------------------------------
/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = (ctx) => ({
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | cssnano: ctx.env === 'production' ? {} : false
6 | },
7 | })
8 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | mode: 'jit',
3 | purge: [
4 | './public/**/*.html'
5 | ],
6 | darkMode: false, // or 'media' or 'class'
7 | theme: {
8 | extend: {},
9 | },
10 | variants: {
11 | extend: {},
12 | },
13 | plugins: [],
14 | }
15 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Tailwind CSS
8 |
9 |
10 |
11 | Hello Tailwind CSS
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwind-2dot2",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "dependencies": {},
7 | "devDependencies": {
8 | "autoprefixer": "^10.2.6",
9 | "cssnano": "^5.0.6",
10 | "postcss-cli": "^8.3.1",
11 | "tailwindcss": "^2.2.4"
12 | },
13 | "scripts": {
14 | "build": "TAILWIND_MODE=watch postcss tailwind.css -o ./public/styles.css -w --verbose",
15 | "prod": "NODE_ENV=production postcss tailwind.css -o ./public/styles.css"
16 | },
17 | "keywords": [],
18 | "author": "",
19 | "license": "ISC"
20 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Install Tailwind CSS v2.2 as a PostCSS plugin with JIT mode
2 |
3 | This is a boilerplate for Tailwind CSS installed as a postCSS plugin and configured for two modes - Watching file changes for **development** and optimizing for **production**:
4 |
5 | ## How to use
6 |
7 | **Step 1:**
8 | `npm install`
9 |
10 | **Step 2:**
11 | `npm run build`
12 |
13 | Watches files as you make changes to your `index.html` within `public` folder
14 |
15 | **Step 3:**
16 | `npm run prod`
17 |
18 | Uses `cssnano` to minify the stylesheet for production
19 |
20 | **Note to Windows users:**
21 |
22 | Change the `build` script to
23 | `"build": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"`
24 |
--------------------------------------------------------------------------------
/public/styles.css:
--------------------------------------------------------------------------------
1 | /*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
2 |
3 | /*
4 | Document
5 | ========
6 | */
7 |
8 | /**
9 | Use a better box model (opinionated).
10 | */
11 |
12 | *,
13 | ::before,
14 | ::after {
15 | box-sizing: border-box;
16 | }
17 |
18 | /**
19 | Use a more readable tab size (opinionated).
20 | */
21 |
22 | html {
23 | -moz-tab-size: 4;
24 | -o-tab-size: 4;
25 | tab-size: 4;
26 | }
27 |
28 | /**
29 | 1. Correct the line height in all browsers.
30 | 2. Prevent adjustments of font size after orientation changes in iOS.
31 | */
32 |
33 | html {
34 | line-height: 1.15; /* 1 */
35 | -webkit-text-size-adjust: 100%; /* 2 */
36 | }
37 |
38 | /*
39 | Sections
40 | ========
41 | */
42 |
43 | /**
44 | Remove the margin in all browsers.
45 | */
46 |
47 | body {
48 | margin: 0;
49 | }
50 |
51 | /**
52 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
53 | */
54 |
55 | body {
56 | font-family:
57 | system-ui,
58 | -apple-system, /* Firefox supports this but not yet `system-ui` */
59 | 'Segoe UI',
60 | Roboto,
61 | Helvetica,
62 | Arial,
63 | sans-serif,
64 | 'Apple Color Emoji',
65 | 'Segoe UI Emoji';
66 | }
67 |
68 | /*
69 | Grouping content
70 | ================
71 | */
72 |
73 | /**
74 | 1. Add the correct height in Firefox.
75 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
76 | */
77 |
78 | hr {
79 | height: 0; /* 1 */
80 | color: inherit; /* 2 */
81 | }
82 |
83 | /*
84 | Text-level semantics
85 | ====================
86 | */
87 |
88 | /**
89 | Add the correct text decoration in Chrome, Edge, and Safari.
90 | */
91 |
92 | abbr[title] {
93 | -webkit-text-decoration: underline dotted;
94 | text-decoration: underline dotted;
95 | }
96 |
97 | /**
98 | Add the correct font weight in Edge and Safari.
99 | */
100 |
101 | b,
102 | strong {
103 | font-weight: bolder;
104 | }
105 |
106 | /**
107 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
108 | 2. Correct the odd 'em' font sizing in all browsers.
109 | */
110 |
111 | code,
112 | kbd,
113 | samp,
114 | pre {
115 | font-family:
116 | ui-monospace,
117 | SFMono-Regular,
118 | Consolas,
119 | 'Liberation Mono',
120 | Menlo,
121 | monospace; /* 1 */
122 | font-size: 1em; /* 2 */
123 | }
124 |
125 | /**
126 | Add the correct font size in all browsers.
127 | */
128 |
129 | small {
130 | font-size: 80%;
131 | }
132 |
133 | /**
134 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
135 | */
136 |
137 | sub,
138 | sup {
139 | font-size: 75%;
140 | line-height: 0;
141 | position: relative;
142 | vertical-align: baseline;
143 | }
144 |
145 | sub {
146 | bottom: -0.25em;
147 | }
148 |
149 | sup {
150 | top: -0.5em;
151 | }
152 |
153 | /*
154 | Tabular data
155 | ============
156 | */
157 |
158 | /**
159 | 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)
160 | 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)
161 | */
162 |
163 | table {
164 | text-indent: 0; /* 1 */
165 | border-color: inherit; /* 2 */
166 | }
167 |
168 | /*
169 | Forms
170 | =====
171 | */
172 |
173 | /**
174 | 1. Change the font styles in all browsers.
175 | 2. Remove the margin in Firefox and Safari.
176 | */
177 |
178 | button,
179 | input,
180 | optgroup,
181 | select,
182 | textarea {
183 | font-family: inherit; /* 1 */
184 | font-size: 100%; /* 1 */
185 | line-height: 1.15; /* 1 */
186 | margin: 0; /* 2 */
187 | }
188 |
189 | /**
190 | Remove the inheritance of text transform in Edge and Firefox.
191 | 1. Remove the inheritance of text transform in Firefox.
192 | */
193 |
194 | button,
195 | select { /* 1 */
196 | text-transform: none;
197 | }
198 |
199 | /**
200 | Correct the inability to style clickable types in iOS and Safari.
201 | */
202 |
203 | button,
204 | [type='button'],
205 | [type='reset'],
206 | [type='submit'] {
207 | -webkit-appearance: button;
208 | }
209 |
210 | /**
211 | Remove the inner border and padding in Firefox.
212 | */
213 |
214 | ::-moz-focus-inner {
215 | border-style: none;
216 | padding: 0;
217 | }
218 |
219 | /**
220 | Restore the focus styles unset by the previous rule.
221 | */
222 |
223 | :-moz-focusring {
224 | outline: 1px dotted ButtonText;
225 | }
226 |
227 | /**
228 | Remove the additional ':invalid' styles in Firefox.
229 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
230 | */
231 |
232 | :-moz-ui-invalid {
233 | box-shadow: none;
234 | }
235 |
236 | /**
237 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
238 | */
239 |
240 | legend {
241 | padding: 0;
242 | }
243 |
244 | /**
245 | Add the correct vertical alignment in Chrome and Firefox.
246 | */
247 |
248 | progress {
249 | vertical-align: baseline;
250 | }
251 |
252 | /**
253 | Correct the cursor style of increment and decrement buttons in Safari.
254 | */
255 |
256 | ::-webkit-inner-spin-button,
257 | ::-webkit-outer-spin-button {
258 | height: auto;
259 | }
260 |
261 | /**
262 | 1. Correct the odd appearance in Chrome and Safari.
263 | 2. Correct the outline style in Safari.
264 | */
265 |
266 | [type='search'] {
267 | -webkit-appearance: textfield; /* 1 */
268 | outline-offset: -2px; /* 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; /* 1 */
286 | font: inherit; /* 2 */
287 | }
288 |
289 | /*
290 | Interactive
291 | ===========
292 | */
293 |
294 | /*
295 | Add the correct display in Chrome and Safari.
296 | */
297 |
298 | summary {
299 | display: list-item;
300 | }/**
301 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
302 | * A thin layer on top of normalize.css that provides a starting point more
303 | * suitable for web applications.
304 | */
305 |
306 | /**
307 | * Removes the default spacing and border for appropriate elements.
308 | */
309 |
310 | blockquote,
311 | dl,
312 | dd,
313 | h1,
314 | h2,
315 | h3,
316 | h4,
317 | h5,
318 | h6,
319 | hr,
320 | figure,
321 | p,
322 | pre {
323 | margin: 0;
324 | }
325 |
326 | button {
327 | background-color: transparent;
328 | background-image: none;
329 | }
330 |
331 | fieldset {
332 | margin: 0;
333 | padding: 0;
334 | }
335 |
336 | ol,
337 | ul {
338 | list-style: none;
339 | margin: 0;
340 | padding: 0;
341 | }
342 |
343 | /**
344 | * Tailwind custom reset styles
345 | */
346 |
347 | /**
348 | * 1. Use the user's configured `sans` font-family (with Tailwind's default
349 | * sans-serif font stack as a fallback) as a sane default.
350 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced
351 | * to override it to ensure consistency even when using the default theme.
352 | */
353 |
354 | html {
355 | 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"; /* 1 */
356 | line-height: 1.5; /* 2 */
357 | }
358 |
359 |
360 | /**
361 | * Inherit font-family and line-height from `html` so users can set them as
362 | * a class directly on the `html` element.
363 | */
364 |
365 | body {
366 | font-family: inherit;
367 | line-height: inherit;
368 | }
369 |
370 | /**
371 | * 1. Prevent padding and border from affecting element width.
372 | *
373 | * We used to set this in the html element and inherit from
374 | * the parent element for everything else. This caused issues
375 | * in shadow-dom-enhanced elements like where the content
376 | * is wrapped by a div with box-sizing set to `content-box`.
377 | *
378 | * https://github.com/mozdevs/cssremedy/issues/4
379 | *
380 | *
381 | * 2. Allow adding a border to an element by just adding a border-width.
382 | *
383 | * By default, the way the browser specifies that an element should have no
384 | * border is by setting it's border-style to `none` in the user-agent
385 | * stylesheet.
386 | *
387 | * In order to easily add borders to elements by just setting the `border-width`
388 | * property, we change the default border-style for all elements to `solid`, and
389 | * use border-width to hide them instead. This way our `border` utilities only
390 | * need to set the `border-width` property instead of the entire `border`
391 | * shorthand, making our border utilities much more straightforward to compose.
392 | *
393 | * https://github.com/tailwindcss/tailwindcss/pull/116
394 | */
395 |
396 | *,
397 | ::before,
398 | ::after {
399 | box-sizing: border-box; /* 1 */
400 | border-width: 0; /* 2 */
401 | border-style: solid; /* 2 */
402 | border-color: currentColor; /* 2 */
403 | }
404 |
405 | /*
406 | * Ensure horizontal rules are visible by default
407 | */
408 |
409 | hr {
410 | border-top-width: 1px;
411 | }
412 |
413 | /**
414 | * Undo the `border-style: none` reset that Normalize applies to images so that
415 | * our `border-{width}` utilities have the expected effect.
416 | *
417 | * The Normalize reset is unnecessary for us since we default the border-width
418 | * to 0 on all elements.
419 | *
420 | * https://github.com/tailwindcss/tailwindcss/issues/362
421 | */
422 |
423 | img {
424 | border-style: solid;
425 | }
426 |
427 | textarea {
428 | resize: vertical;
429 | }
430 |
431 | input::-moz-placeholder, textarea::-moz-placeholder {
432 | opacity: 1;
433 | color: #9ca3af;
434 | }
435 |
436 | input:-ms-input-placeholder, textarea:-ms-input-placeholder {
437 | opacity: 1;
438 | color: #9ca3af;
439 | }
440 |
441 | input::placeholder,
442 | textarea::placeholder {
443 | opacity: 1;
444 | color: #9ca3af;
445 | }
446 |
447 | button,
448 | [role="button"] {
449 | cursor: pointer;
450 | }
451 |
452 | table {
453 | border-collapse: collapse;
454 | }
455 |
456 | h1,
457 | h2,
458 | h3,
459 | h4,
460 | h5,
461 | h6 {
462 | font-size: inherit;
463 | font-weight: inherit;
464 | }
465 |
466 | /**
467 | * Reset links to optimize for opt-in styling instead of
468 | * opt-out.
469 | */
470 |
471 | a {
472 | color: inherit;
473 | text-decoration: inherit;
474 | }
475 |
476 | /**
477 | * Reset form element properties that are easy to forget to
478 | * style explicitly so you don't inadvertently introduce
479 | * styles that deviate from your design system. These styles
480 | * supplement a partial reset that is already applied by
481 | * normalize.css.
482 | */
483 |
484 | button,
485 | input,
486 | optgroup,
487 | select,
488 | textarea {
489 | padding: 0;
490 | line-height: inherit;
491 | color: inherit;
492 | }
493 |
494 | /**
495 | * Use the configured 'mono' font family for elements that
496 | * are expected to be rendered with a monospace font, falling
497 | * back to the system monospace stack if there is no configured
498 | * 'mono' font family.
499 | */
500 |
501 | pre,
502 | code,
503 | kbd,
504 | samp {
505 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
506 | }
507 |
508 | /**
509 | * 1. Make replaced elements `display: block` by default as that's
510 | * the behavior you want almost all of the time. Inspired by
511 | * CSS Remedy, with `svg` added as well.
512 | *
513 | * https://github.com/mozdevs/cssremedy/issues/14
514 | *
515 | * 2. Add `vertical-align: middle` to align replaced elements more
516 | * sensibly by default when overriding `display` by adding a
517 | * utility like `inline`.
518 | *
519 | * This can trigger a poorly considered linting error in some
520 | * tools but is included by design.
521 | *
522 | * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
523 | */
524 |
525 | img,
526 | svg,
527 | video,
528 | canvas,
529 | audio,
530 | iframe,
531 | embed,
532 | object {
533 | display: block; /* 1 */
534 | vertical-align: middle; /* 2 */
535 | }
536 |
537 | /**
538 | * Constrain images and videos to the parent width and preserve
539 | * their intrinsic aspect ratio.
540 | *
541 | * https://github.com/mozdevs/cssremedy/issues/14
542 | */
543 |
544 | img,
545 | video {
546 | max-width: 100%;
547 | height: auto;
548 | }
549 |
550 | *, ::before, ::after {
551 | --tw-translate-x: 0;
552 | --tw-translate-y: 0;
553 | --tw-rotate: 0;
554 | --tw-skew-x: 0;
555 | --tw-skew-y: 0;
556 | --tw-scale-x: 1;
557 | --tw-scale-y: 1;
558 | --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
559 | --tw-border-opacity: 1;
560 | border-color: rgba(229, 231, 235, var(--tw-border-opacity));
561 | --tw-shadow: 0 0 #0000;
562 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
563 | --tw-ring-offset-width: 0px;
564 | --tw-ring-offset-color: #fff;
565 | --tw-ring-color: rgba(59, 130, 246, 0.5);
566 | --tw-ring-offset-shadow: 0 0 #0000;
567 | --tw-ring-shadow: 0 0 #0000;
568 | --tw-blur: var(--tw-empty,/*!*/ /*!*/);
569 | --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
570 | --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
571 | --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
572 | --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
573 | --tw-invert: var(--tw-empty,/*!*/ /*!*/);
574 | --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
575 | --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
576 | --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
577 | --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
578 | --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
579 | --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
580 | --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
581 | --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
582 | --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
583 | --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
584 | --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
585 | --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
586 | --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
587 | --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
588 | }
589 | .pt-36 {
590 | padding-top: 9rem;
591 | }
592 | .text-center {
593 | text-align: center;
594 | }
595 | .text-4xl {
596 | font-size: 2.25rem;
597 | line-height: 2.5rem;
598 | }
599 | .font-bold {
600 | font-weight: 700;
601 | }
602 | .text-purple-700 {
603 | --tw-text-opacity: 1;
604 | color: rgba(109, 40, 217, var(--tw-text-opacity));
605 | }
--------------------------------------------------------------------------------