├── .gitignore ├── .postcssrc.js ├── .posthtmlrc ├── README.md ├── css └── app.css ├── img └── collaboration.svg ├── index.html ├── package.json ├── tailwind.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .cache/ 2 | dist/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | "plugins": [ 4 | require('tailwindcss')('./tailwind.js'), 5 | require('autoprefixer')(), 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.posthtmlrc: -------------------------------------------------------------------------------- 1 | { 2 | "lowerCaseAttributeNames": false 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rebuilding Netlify 2 | 3 | Source code for my ["Rebuilding Netlify" live stream](https://www.youtube.com/watch?v=_JhTaENzfZQ). 4 | 5 | To run locally: 6 | 7 | 1. Install [Parcel](https://github.com/parcel-bundler/parcel) 8 | 2. Clone this repo 9 | 3. Install this repo's dependencies using `npm install` or `yarn` 10 | 4. Run `parcel index.html` 11 | -------------------------------------------------------------------------------- /css/app.css: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /img/collaboration.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | General | Settings 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Adam Wathan 25 | 26 | 27 | 28 | elated-stonebraker-70896a 29 | 30 |
31 |
32 | 35 |
36 |
37 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |

Settings for elated-stonebraker-70896a

53 |

54 | tailwindcss.com 55 |

56 |

Deploys from GitHub. Owned by Adam Wathan

57 |

Last update on Jul 11 (2 days ago)

58 |
59 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | General 73 |
74 |
75 | Site details 76 |
77 |
78 | Site administrators 79 |
80 |
81 | Danger zone 82 |
83 |
84 | Build & deploy 85 |
86 |
87 | Domain management 88 |
89 |
90 | Functions 91 |
92 |
93 | Identity 94 |
95 |
96 | Forms 97 |
98 |
99 | Access control 100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |

Site details

108 |

General information about your site

109 |
110 |
111 |

Site information

112 |
113 |
114 |
115 |
116 | Site name: 117 |
118 |
119 | elated-stonebraker-70896a 120 |
121 |
122 |
123 |
124 | Owner: 125 |
126 |
127 | 131 |
132 |
133 |
134 |
135 | Repository: 136 |
137 |
138 | github.com/tailwindcss/docs 139 |
140 |
141 |
142 |
143 | API ID: 144 |
145 |
146 | 42999d0e-b846-4039-bfb5-5b3a1cd68a3b 147 |
148 |
149 |
150 |
151 | Created: 152 |
153 |
154 | Mar 4 at 1:14 PM 155 |
156 |
157 |
158 |
159 | Last update: 160 |
161 |
162 | Jul 11 at 4:00 PM 163 |
164 |
165 |
166 |
167 |
168 | 169 |
170 |
171 |
172 |
173 |

Add-ons

174 |

This site is not using any add-ons

175 |

Take your static site further with rich add-ons built right into your dashboard. Automatically upgrade tiers as your usage grows, paying only for what you use.

176 |

177 | 178 | Learn more about pricing and usage 179 | 180 | 181 |

182 |
183 |
184 |
185 | 186 |
187 |
188 |

Site administrators

189 |

Collaborate with others on this site

190 |
191 |
192 |
193 |

Team collaboration

194 |

Transfer your site to a team to activate collaboration features like multi-level administrator roles and visitor access control.

195 |

196 | 197 | Learn more about our pricing 198 | 199 | 200 |

201 |
202 | 203 |
204 |
205 | 208 |
209 | 210 |
211 |

Administrators

212 |
213 |
214 | 215 |
216 | Adam Wathan 217 | <adam@example.com> 218 |
219 |
220 |
221 |
222 | 223 |
224 |
225 |
226 | 227 |
228 |
229 |

Danger zone

230 |

Irreversible and destructive actions. Tread lightly

231 |
232 |
233 |

Delete site

234 |

Once you delete a site, there is no going back.

235 |
236 | 237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 | Docs 247 | Pricing 248 | Support 249 | News 250 | Terms 251 |
252 |
253 |

© 2018 Netlify

254 |
255 |
256 |
257 | 258 | 259 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "autoprefixer": "^8.6.5", 4 | "tailwindcss": "^0.6.3" 5 | }, 6 | "devDependencies": { 7 | "cssnano": "^4.0.1", 8 | "parcel-bundler": "^1.9.6" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | // let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'black-20': 'rgba(0,0,0,.2)', 50 | 51 | 'black': '#161f27', 52 | 'grey-darkest': '#3d4852', 53 | 'grey-darker': '#606f7b', 54 | 'grey-dark': '#8795a1', 55 | 'grey': '#b8c2cc', 56 | 'grey-light': '#dae1e7', 57 | 'grey-lighter': '#f1f5f8', 58 | 'grey-lightest': '#f8fafc', 59 | 'white': '#ffffff', 60 | 61 | 'red-darkest': '#3b0d0c', 62 | 'red-darker': '#621b18', 63 | 'red-dark': '#cc1f1a', 64 | 'red': '#e3342f', 65 | 'red-light': '#ef5753', 66 | 'red-lighter': '#f9acaa', 67 | 'red-lightest': '#fcebea', 68 | 69 | 'orange-darkest': '#462a16', 70 | 'orange-darker': '#613b1f', 71 | 'orange-dark': '#de751f', 72 | 'orange': '#f6993f', 73 | 'orange-light': '#faad63', 74 | 'orange-lighter': '#fcd9b6', 75 | 'orange-lightest': '#fff5eb', 76 | 77 | 'yellow-darkest': '#453411', 78 | 'yellow-darker': '#684f1d', 79 | 'yellow-dark': '#f2d024', 80 | 'yellow': '#ffed4a', 81 | 'yellow-light': '#fff382', 82 | 'yellow-lighter': '#fff9c2', 83 | 'yellow-lightest': '#fcfbeb', 84 | 85 | 'green-darkest': '#0f2f21', 86 | 'green-darker': '#1a4731', 87 | 'green-dark': '#1f9d55', 88 | 'green': '#38c172', 89 | 'green-light': '#51d88a', 90 | 'green-lighter': '#a2f5bf', 91 | 'green-lightest': '#e3fcec', 92 | 93 | 'teal-darkest': '#0d3331', 94 | 'teal-darker': '#20504f', 95 | 'teal-dark': '#38a89d', 96 | 'teal': '#4dc0b5', 97 | 'teal-light': '#64d5ca', 98 | 'teal-lighter': '#a0f0ed', 99 | 'teal-lightest': '#e8fffe', 100 | 101 | 'blue-darkest': '#12283a', 102 | 'blue-darker': '#1c3d5a', 103 | 'blue-dark': '#2779bd', 104 | 'blue': '#3490dc', 105 | 'blue-light': '#6cb2eb', 106 | 'blue-lighter': '#bcdefa', 107 | 'blue-lightest': '#eff8ff', 108 | 109 | 'indigo-darkest': '#191e38', 110 | 'indigo-darker': '#2f365f', 111 | 'indigo-dark': '#5661b3', 112 | 'indigo': '#6574cd', 113 | 'indigo-light': '#7886d7', 114 | 'indigo-lighter': '#b2b7ff', 115 | 'indigo-lightest': '#e6e8ff', 116 | 117 | 'purple-darkest': '#21183c', 118 | 'purple-darker': '#382b5f', 119 | 'purple-dark': '#794acf', 120 | 'purple': '#9561e2', 121 | 'purple-light': '#a779e9', 122 | 'purple-lighter': '#d6bbfc', 123 | 'purple-lightest': '#f3ebff', 124 | 125 | 'pink-darkest': '#451225', 126 | 'pink-darker': '#6f213f', 127 | 'pink-dark': '#eb5286', 128 | 'pink': '#f66d9b', 129 | 'pink-light': '#fa7ea8', 130 | 'pink-lighter': '#ffbbca', 131 | 'pink-lightest': '#ffebef', 132 | } 133 | 134 | module.exports = { 135 | 136 | /* 137 | |----------------------------------------------------------------------------- 138 | | Colors https://tailwindcss.com/docs/colors 139 | |----------------------------------------------------------------------------- 140 | | 141 | | The color palette defined above is also assigned to the "colors" key of 142 | | your Tailwind config. This makes it easy to access them in your CSS 143 | | using Tailwind's config helper. For example: 144 | | 145 | | .error { color: config('colors.red') } 146 | | 147 | */ 148 | 149 | colors: colors, 150 | 151 | 152 | /* 153 | |----------------------------------------------------------------------------- 154 | | Screens https://tailwindcss.com/docs/responsive-design 155 | |----------------------------------------------------------------------------- 156 | | 157 | | Screens in Tailwind are translated to CSS media queries. They define the 158 | | responsive breakpoints for your project. By default Tailwind takes a 159 | | "mobile first" approach, where each screen size represents a minimum 160 | | viewport width. Feel free to have as few or as many screens as you 161 | | want, naming them in whatever way you'd prefer for your project. 162 | | 163 | | Tailwind also allows for more complex screen definitions, which can be 164 | | useful in certain situations. Be sure to see the full responsive 165 | | documentation for a complete list of options. 166 | | 167 | | Class name: .{screen}:{utility} 168 | | 169 | */ 170 | 171 | screens: { 172 | 'sm': '576px', 173 | 'md': '768px', 174 | 'lg': '992px', 175 | 'xl': '1200px', 176 | }, 177 | 178 | 179 | /* 180 | |----------------------------------------------------------------------------- 181 | | Fonts https://tailwindcss.com/docs/fonts 182 | |----------------------------------------------------------------------------- 183 | | 184 | | Here is where you define your project's font stack, or font families. 185 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 186 | | If you're using custom fonts you'll need to import them prior to 187 | | defining them here. 188 | | 189 | | By default we provide a native font stack that works remarkably well on 190 | | any device or OS you're using, since it just uses the default fonts 191 | | provided by the platform. 192 | | 193 | | Class name: .font-{name} 194 | | 195 | */ 196 | 197 | fonts: { 198 | 'sans': [ 199 | 'system-ui', 200 | 'BlinkMacSystemFont', 201 | '-apple-system', 202 | 'Segoe UI', 203 | 'Roboto', 204 | 'Oxygen', 205 | 'Ubuntu', 206 | 'Cantarell', 207 | 'Fira Sans', 208 | 'Droid Sans', 209 | 'Helvetica Neue', 210 | 'sans-serif', 211 | ], 212 | 'serif': [ 213 | 'Constantia', 214 | 'Lucida Bright', 215 | 'Lucidabright', 216 | 'Lucida Serif', 217 | 'Lucida', 218 | 'DejaVu Serif', 219 | 'Bitstream Vera Serif', 220 | 'Liberation Serif', 221 | 'Georgia', 222 | 'serif', 223 | ], 224 | 'mono': [ 225 | 'Menlo', 226 | 'Monaco', 227 | 'Consolas', 228 | 'Liberation Mono', 229 | 'Courier New', 230 | 'monospace', 231 | ] 232 | }, 233 | 234 | 235 | /* 236 | |----------------------------------------------------------------------------- 237 | | Text sizes https://tailwindcss.com/docs/text-sizing 238 | |----------------------------------------------------------------------------- 239 | | 240 | | Here is where you define your text sizes. Name these in whatever way 241 | | makes the most sense to you. We use size names by default, but 242 | | you're welcome to use a numeric scale or even something else 243 | | entirely. 244 | | 245 | | By default Tailwind uses the "rem" unit type for most measurements. 246 | | This allows you to set a root font size which all other sizes are 247 | | then based on. That said, you are free to use whatever units you 248 | | prefer, be it rems, ems, pixels or other. 249 | | 250 | | Class name: .text-{size} 251 | | 252 | */ 253 | 254 | textSizes: { 255 | 'xs': '.75rem', // 12px 256 | 'sm': '.875rem', // 14px 257 | 'base': '1rem', // 16px 258 | 'lg': '1.125rem', // 18px 259 | 'xl': '1.25rem', // 20px 260 | '2xl': '1.5rem', // 24px 261 | '3xl': '1.875rem', // 30px 262 | '4xl': '2.25rem', // 36px 263 | '5xl': '3rem', // 48px 264 | }, 265 | 266 | 267 | /* 268 | |----------------------------------------------------------------------------- 269 | | Font weights https://tailwindcss.com/docs/font-weight 270 | |----------------------------------------------------------------------------- 271 | | 272 | | Here is where you define your font weights. We've provided a list of 273 | | common font weight names with their respective numeric scale values 274 | | to get you started. It's unlikely that your project will require 275 | | all of these, so we recommend removing those you don't need. 276 | | 277 | | Class name: .font-{weight} 278 | | 279 | */ 280 | 281 | fontWeights: { 282 | 'hairline': 100, 283 | 'thin': 200, 284 | 'light': 300, 285 | 'normal': 400, 286 | 'medium': 500, 287 | 'semibold': 600, 288 | 'bold': 700, 289 | 'extrabold': 800, 290 | 'black': 900, 291 | }, 292 | 293 | 294 | /* 295 | |----------------------------------------------------------------------------- 296 | | Leading (line height) https://tailwindcss.com/docs/line-height 297 | |----------------------------------------------------------------------------- 298 | | 299 | | Here is where you define your line height values, or as we call 300 | | them in Tailwind, leadings. 301 | | 302 | | Class name: .leading-{size} 303 | | 304 | */ 305 | 306 | leading: { 307 | 'none': 1, 308 | 'tight': 1.25, 309 | 'normal': 1.5, 310 | 'loose': 2, 311 | }, 312 | 313 | 314 | /* 315 | |----------------------------------------------------------------------------- 316 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 317 | |----------------------------------------------------------------------------- 318 | | 319 | | Here is where you define your letter spacing values, or as we call 320 | | them in Tailwind, tracking. 321 | | 322 | | Class name: .tracking-{size} 323 | | 324 | */ 325 | 326 | tracking: { 327 | 'tight': '-0.05em', 328 | 'normal': '0', 329 | 'wide': '0.05em', 330 | }, 331 | 332 | 333 | /* 334 | |----------------------------------------------------------------------------- 335 | | Text colors https://tailwindcss.com/docs/text-color 336 | |----------------------------------------------------------------------------- 337 | | 338 | | Here is where you define your text colors. By default these use the 339 | | color palette we defined above, however you're welcome to set these 340 | | independently if that makes sense for your project. 341 | | 342 | | Class name: .text-{color} 343 | | 344 | */ 345 | 346 | textColors: colors, 347 | 348 | 349 | /* 350 | |----------------------------------------------------------------------------- 351 | | Background colors https://tailwindcss.com/docs/background-color 352 | |----------------------------------------------------------------------------- 353 | | 354 | | Here is where you define your background colors. By default these use 355 | | the color palette we defined above, however you're welcome to set 356 | | these independently if that makes sense for your project. 357 | | 358 | | Class name: .bg-{color} 359 | | 360 | */ 361 | 362 | backgroundColors: colors, 363 | 364 | 365 | /* 366 | |----------------------------------------------------------------------------- 367 | | Background sizes https://tailwindcss.com/docs/background-size 368 | |----------------------------------------------------------------------------- 369 | | 370 | | Here is where you define your background sizes. We provide some common 371 | | values that are useful in most projects, but feel free to add other sizes 372 | | that are specific to your project here as well. 373 | | 374 | | Class name: .bg-{size} 375 | | 376 | */ 377 | 378 | backgroundSize: { 379 | 'auto': 'auto', 380 | 'cover': 'cover', 381 | 'contain': 'contain', 382 | }, 383 | 384 | 385 | /* 386 | |----------------------------------------------------------------------------- 387 | | Border widths https://tailwindcss.com/docs/border-width 388 | |----------------------------------------------------------------------------- 389 | | 390 | | Here is where you define your border widths. Take note that border 391 | | widths require a special "default" value set as well. This is the 392 | | width that will be used when you do not specify a border width. 393 | | 394 | | Class name: .border{-side?}{-width?} 395 | | 396 | */ 397 | 398 | borderWidths: { 399 | default: '1px', 400 | '0': '0', 401 | '2': '2px', 402 | '4': '4px', 403 | '8': '8px', 404 | }, 405 | 406 | 407 | /* 408 | |----------------------------------------------------------------------------- 409 | | Border colors https://tailwindcss.com/docs/border-color 410 | |----------------------------------------------------------------------------- 411 | | 412 | | Here is where you define your border colors. By default these use the 413 | | color palette we defined above, however you're welcome to set these 414 | | independently if that makes sense for your project. 415 | | 416 | | Take note that border colors require a special "default" value set 417 | | as well. This is the color that will be used when you do not 418 | | specify a border color. 419 | | 420 | | Class name: .border-{color} 421 | | 422 | */ 423 | 424 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 425 | 426 | 427 | /* 428 | |----------------------------------------------------------------------------- 429 | | Border radius https://tailwindcss.com/docs/border-radius 430 | |----------------------------------------------------------------------------- 431 | | 432 | | Here is where you define your border radius values. If a `default` radius 433 | | is provided, it will be made available as the non-suffixed `.rounded` 434 | | utility. 435 | | 436 | | If your scale includes a `0` value to reset already rounded corners, it's 437 | | a good idea to put it first so other values are able to override it. 438 | | 439 | | Class name: .rounded{-side?}{-size?} 440 | | 441 | */ 442 | 443 | borderRadius: { 444 | 'none': '0', 445 | 'sm': '.125rem', 446 | default: '.25rem', 447 | 'lg': '.5rem', 448 | 'full': '9999px', 449 | }, 450 | 451 | 452 | /* 453 | |----------------------------------------------------------------------------- 454 | | Width https://tailwindcss.com/docs/width 455 | |----------------------------------------------------------------------------- 456 | | 457 | | Here is where you define your width utility sizes. These can be 458 | | percentage based, pixels, rems, or any other units. By default 459 | | we provide a sensible rem based numeric scale, a percentage 460 | | based fraction scale, plus some other common use-cases. You 461 | | can, of course, modify these values as needed. 462 | | 463 | | 464 | | It's also worth mentioning that Tailwind automatically escapes 465 | | invalid CSS class name characters, which allows you to have 466 | | awesome classes like .w-2/3. 467 | | 468 | | Class name: .w-{size} 469 | | 470 | */ 471 | 472 | width: { 473 | 'auto': 'auto', 474 | 'px': '1px', 475 | '1': '0.25rem', 476 | '2': '0.5rem', 477 | '3': '0.75rem', 478 | '4': '1rem', 479 | '5': '1.25rem', 480 | '6': '1.5rem', 481 | '8': '2rem', 482 | '10': '2.5rem', 483 | '12': '3rem', 484 | '16': '4rem', 485 | '24': '6rem', 486 | '32': '8rem', 487 | '48': '12rem', 488 | '64': '16rem', 489 | 'xs': '20rem', 490 | 'sm': '30rem', 491 | 'md': '40rem', 492 | 'lg': '50rem', 493 | 'xl': '60rem', 494 | '2xl': '70rem', 495 | '3xl': '80rem', 496 | '4xl': '90rem', 497 | '5xl': '100rem', 498 | '1/2': '50%', 499 | '1/3': '33.33333%', 500 | '2/3': '66.66667%', 501 | '1/4': '25%', 502 | '3/4': '75%', 503 | '1/5': '20%', 504 | '2/5': '40%', 505 | '3/5': '60%', 506 | '4/5': '80%', 507 | '1/6': '16.66667%', 508 | '5/6': '83.33333%', 509 | 'full': '100%', 510 | 'screen': '100vw' 511 | }, 512 | 513 | 514 | /* 515 | |----------------------------------------------------------------------------- 516 | | Height https://tailwindcss.com/docs/height 517 | |----------------------------------------------------------------------------- 518 | | 519 | | Here is where you define your height utility sizes. These can be 520 | | percentage based, pixels, rems, or any other units. By default 521 | | we provide a sensible rem based numeric scale plus some other 522 | | common use-cases. You can, of course, modify these values as 523 | | needed. 524 | | 525 | | Class name: .h-{size} 526 | | 527 | */ 528 | 529 | height: { 530 | 'auto': 'auto', 531 | 'px': '1px', 532 | '1': '0.25rem', 533 | '2': '0.5rem', 534 | '3': '0.75rem', 535 | '4': '1rem', 536 | '5': '1.25rem', 537 | '6': '1.5rem', 538 | '8': '2rem', 539 | '10': '2.5rem', 540 | '12': '3rem', 541 | '16': '4rem', 542 | '24': '6rem', 543 | '32': '8rem', 544 | '48': '12rem', 545 | '64': '16rem', 546 | 'full': '100%', 547 | 'screen': '100vh' 548 | }, 549 | 550 | 551 | /* 552 | |----------------------------------------------------------------------------- 553 | | Minimum width https://tailwindcss.com/docs/min-width 554 | |----------------------------------------------------------------------------- 555 | | 556 | | Here is where you define your minimum width utility sizes. These can 557 | | be percentage based, pixels, rems, or any other units. We provide a 558 | | couple common use-cases by default. You can, of course, modify 559 | | these values as needed. 560 | | 561 | | Class name: .min-w-{size} 562 | | 563 | */ 564 | 565 | minWidth: { 566 | '0': '0', 567 | 'full': '100%', 568 | }, 569 | 570 | 571 | /* 572 | |----------------------------------------------------------------------------- 573 | | Minimum height https://tailwindcss.com/docs/min-height 574 | |----------------------------------------------------------------------------- 575 | | 576 | | Here is where you define your minimum height utility sizes. These can 577 | | be percentage based, pixels, rems, or any other units. We provide a 578 | | few common use-cases by default. You can, of course, modify these 579 | | values as needed. 580 | | 581 | | Class name: .min-h-{size} 582 | | 583 | */ 584 | 585 | minHeight: { 586 | '0': '0', 587 | 'full': '100%', 588 | 'screen': '100vh' 589 | }, 590 | 591 | 592 | /* 593 | |----------------------------------------------------------------------------- 594 | | Maximum width https://tailwindcss.com/docs/max-width 595 | |----------------------------------------------------------------------------- 596 | | 597 | | Here is where you define your maximum width utility sizes. These can 598 | | be percentage based, pixels, rems, or any other units. By default 599 | | we provide a sensible rem based scale and a "full width" size, 600 | | which is basically a reset utility. You can, of course, 601 | | modify these values as needed. 602 | | 603 | | Class name: .max-w-{size} 604 | | 605 | */ 606 | 607 | maxWidth: { 608 | 'xs': '20rem', 609 | 'sm': '30rem', 610 | 'md': '40rem', 611 | 'lg': '50rem', 612 | 'xl': '60rem', 613 | '2xl': '70rem', 614 | '3xl': '80rem', 615 | '4xl': '90rem', 616 | '5xl': '100rem', 617 | 'full': '100%', 618 | }, 619 | 620 | 621 | /* 622 | |----------------------------------------------------------------------------- 623 | | Maximum height https://tailwindcss.com/docs/max-height 624 | |----------------------------------------------------------------------------- 625 | | 626 | | Here is where you define your maximum height utility sizes. These can 627 | | be percentage based, pixels, rems, or any other units. We provide a 628 | | couple common use-cases by default. You can, of course, modify 629 | | these values as needed. 630 | | 631 | | Class name: .max-h-{size} 632 | | 633 | */ 634 | 635 | maxHeight: { 636 | 'full': '100%', 637 | 'screen': '100vh', 638 | }, 639 | 640 | 641 | /* 642 | |----------------------------------------------------------------------------- 643 | | Padding https://tailwindcss.com/docs/padding 644 | |----------------------------------------------------------------------------- 645 | | 646 | | Here is where you define your padding utility sizes. These can be 647 | | percentage based, pixels, rems, or any other units. By default we 648 | | provide a sensible rem based numeric scale plus a couple other 649 | | common use-cases like "1px". You can, of course, modify these 650 | | values as needed. 651 | | 652 | | Class name: .p{side?}-{size} 653 | | 654 | */ 655 | 656 | padding: { 657 | 'px': '1px', 658 | '0': '0', 659 | '1': '0.25rem', 660 | '2': '0.5rem', 661 | '3': '0.75rem', 662 | '4': '1rem', 663 | '5': '1.25rem', 664 | '6': '1.5rem', 665 | '8': '2rem', 666 | '10': '2.5rem', 667 | '12': '3rem', 668 | '16': '4rem', 669 | '20': '5rem', 670 | '24': '6rem', 671 | '32': '8rem', 672 | }, 673 | 674 | 675 | /* 676 | |----------------------------------------------------------------------------- 677 | | Margin https://tailwindcss.com/docs/margin 678 | |----------------------------------------------------------------------------- 679 | | 680 | | Here is where you define your margin utility sizes. These can be 681 | | percentage based, pixels, rems, or any other units. By default we 682 | | provide a sensible rem based numeric scale plus a couple other 683 | | common use-cases like "1px". You can, of course, modify these 684 | | values as needed. 685 | | 686 | | Class name: .m{side?}-{size} 687 | | 688 | */ 689 | 690 | margin: { 691 | 'auto': 'auto', 692 | 'px': '1px', 693 | '0': '0', 694 | '1': '0.25rem', 695 | '2': '0.5rem', 696 | '3': '0.75rem', 697 | '4': '1rem', 698 | '5': '1.25rem', 699 | '6': '1.5rem', 700 | '8': '2rem', 701 | '10': '2.5rem', 702 | '12': '3rem', 703 | '16': '4rem', 704 | '20': '5rem', 705 | '24': '6rem', 706 | '32': '8rem', 707 | }, 708 | 709 | 710 | /* 711 | |----------------------------------------------------------------------------- 712 | | Negative margin https://tailwindcss.com/docs/negative-margin 713 | |----------------------------------------------------------------------------- 714 | | 715 | | Here is where you define your negative margin utility sizes. These can 716 | | be percentage based, pixels, rems, or any other units. By default we 717 | | provide matching values to the padding scale since these utilities 718 | | generally get used together. You can, of course, modify these 719 | | values as needed. 720 | | 721 | | Class name: .-m{side?}-{size} 722 | | 723 | */ 724 | 725 | negativeMargin: { 726 | 'px': '1px', 727 | '0': '0', 728 | '1': '0.25rem', 729 | '2': '0.5rem', 730 | '3': '0.75rem', 731 | '4': '1rem', 732 | '5': '1.25rem', 733 | '6': '1.5rem', 734 | '8': '2rem', 735 | '10': '2.5rem', 736 | '12': '3rem', 737 | '16': '4rem', 738 | '20': '5rem', 739 | '24': '6rem', 740 | '32': '8rem', 741 | }, 742 | 743 | 744 | /* 745 | |----------------------------------------------------------------------------- 746 | | Shadows https://tailwindcss.com/docs/shadows 747 | |----------------------------------------------------------------------------- 748 | | 749 | | Here is where you define your shadow utilities. As you can see from 750 | | the defaults we provide, it's possible to apply multiple shadows 751 | | per utility using comma separation. 752 | | 753 | | If a `default` shadow is provided, it will be made available as the non- 754 | | suffixed `.shadow` utility. 755 | | 756 | | Class name: .shadow-{size?} 757 | | 758 | */ 759 | 760 | shadows: { 761 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 762 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 763 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 764 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 765 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 766 | 'none': 'none', 767 | }, 768 | 769 | 770 | /* 771 | |----------------------------------------------------------------------------- 772 | | Z-index https://tailwindcss.com/docs/z-index 773 | |----------------------------------------------------------------------------- 774 | | 775 | | Here is where you define your z-index utility values. By default we 776 | | provide a sensible numeric scale. You can, of course, modify these 777 | | values as needed. 778 | | 779 | | Class name: .z-{index} 780 | | 781 | */ 782 | 783 | zIndex: { 784 | 'auto': 'auto', 785 | '0': 0, 786 | '10': 10, 787 | '20': 20, 788 | '30': 30, 789 | '40': 40, 790 | '50': 50, 791 | }, 792 | 793 | 794 | /* 795 | |----------------------------------------------------------------------------- 796 | | Opacity https://tailwindcss.com/docs/opacity 797 | |----------------------------------------------------------------------------- 798 | | 799 | | Here is where you define your opacity utility values. By default we 800 | | provide a sensible numeric scale. You can, of course, modify these 801 | | values as needed. 802 | | 803 | | Class name: .opacity-{name} 804 | | 805 | */ 806 | 807 | opacity: { 808 | '0': '0', 809 | '25': '.25', 810 | '50': '.5', 811 | '75': '.75', 812 | '100': '1', 813 | }, 814 | 815 | 816 | /* 817 | |----------------------------------------------------------------------------- 818 | | SVG fill https://tailwindcss.com/docs/svg 819 | |----------------------------------------------------------------------------- 820 | | 821 | | Here is where you define your SVG fill colors. By default we just provide 822 | | `fill-current` which sets the fill to the current text color. This lets you 823 | | specify a fill color using existing text color utilities and helps keep the 824 | | generated CSS file size down. 825 | | 826 | | Class name: .fill-{name} 827 | | 828 | */ 829 | 830 | svgFill: { 831 | 'current': 'currentColor', 832 | }, 833 | 834 | 835 | /* 836 | |----------------------------------------------------------------------------- 837 | | SVG stroke https://tailwindcss.com/docs/svg 838 | |----------------------------------------------------------------------------- 839 | | 840 | | Here is where you define your SVG stroke colors. By default we just provide 841 | | `stroke-current` which sets the stroke to the current text color. This lets 842 | | you specify a stroke color using existing text color utilities and helps 843 | | keep the generated CSS file size down. 844 | | 845 | | Class name: .stroke-{name} 846 | | 847 | */ 848 | 849 | svgStroke: { 850 | 'current': 'currentColor', 851 | }, 852 | 853 | 854 | /* 855 | |----------------------------------------------------------------------------- 856 | | Modules https://tailwindcss.com/docs/configuration#modules 857 | |----------------------------------------------------------------------------- 858 | | 859 | | Here is where you control which modules are generated and what variants are 860 | | generated for each of those modules. 861 | | 862 | | Currently supported variants: 863 | | - responsive 864 | | - hover 865 | | - focus 866 | | - active 867 | | - group-hover 868 | | 869 | | To disable a module completely, use `false` instead of an array. 870 | | 871 | */ 872 | 873 | modules: { 874 | appearance: ['responsive'], 875 | backgroundAttachment: ['responsive'], 876 | backgroundColors: ['responsive', 'hover', 'focus'], 877 | backgroundPosition: ['responsive'], 878 | backgroundRepeat: ['responsive'], 879 | backgroundSize: ['responsive'], 880 | borderCollapse: [], 881 | borderColors: ['responsive', 'hover', 'focus'], 882 | borderRadius: ['responsive'], 883 | borderStyle: ['responsive'], 884 | borderWidths: ['responsive'], 885 | cursor: ['responsive'], 886 | display: ['responsive'], 887 | flexbox: ['responsive'], 888 | float: ['responsive'], 889 | fonts: ['responsive'], 890 | fontWeights: ['responsive', 'hover', 'focus'], 891 | height: ['responsive'], 892 | leading: ['responsive'], 893 | lists: ['responsive'], 894 | margin: ['responsive'], 895 | maxHeight: ['responsive'], 896 | maxWidth: ['responsive'], 897 | minHeight: ['responsive'], 898 | minWidth: ['responsive'], 899 | negativeMargin: ['responsive'], 900 | opacity: ['responsive', 'hover'], 901 | outline: ['focus'], 902 | overflow: ['responsive'], 903 | padding: ['responsive'], 904 | pointerEvents: ['responsive'], 905 | position: ['responsive'], 906 | resize: ['responsive'], 907 | shadows: ['responsive', 'hover', 'focus'], 908 | svgFill: [], 909 | svgStroke: [], 910 | tableLayout: ['responsive'], 911 | textAlign: ['responsive'], 912 | textColors: ['responsive', 'hover', 'focus'], 913 | textSizes: ['responsive'], 914 | textStyle: ['responsive', 'hover', 'focus', 'group-hover'], 915 | tracking: ['responsive'], 916 | userSelect: ['responsive'], 917 | verticalAlign: ['responsive'], 918 | visibility: ['responsive'], 919 | whitespace: ['responsive'], 920 | width: ['responsive'], 921 | zIndex: ['responsive'], 922 | }, 923 | 924 | 925 | /* 926 | |----------------------------------------------------------------------------- 927 | | Plugins https://tailwindcss.com/docs/plugins 928 | |----------------------------------------------------------------------------- 929 | | 930 | | Here is where you can register any plugins you'd like to use in your 931 | | project. Tailwind's built-in `container` plugin is enabled by default to 932 | | give you a Bootstrap-style responsive container component out of the box. 933 | | 934 | | Be sure to view the complete plugin documentation to learn more about how 935 | | the plugin system works. 936 | | 937 | */ 938 | 939 | plugins: [ 940 | require('tailwindcss/plugins/container')({ 941 | // center: true, 942 | // padding: '1rem', 943 | }), 944 | ], 945 | 946 | 947 | /* 948 | |----------------------------------------------------------------------------- 949 | | Advanced Options https://tailwindcss.com/docs/configuration#options 950 | |----------------------------------------------------------------------------- 951 | | 952 | | Here is where you can tweak advanced configuration options. We recommend 953 | | leaving these options alone unless you absolutely need to change them. 954 | | 955 | */ 956 | 957 | options: { 958 | prefix: '', 959 | important: false, 960 | separator: ':', 961 | }, 962 | 963 | experiments: { 964 | shadowLookup: true, 965 | pluginVariants: true, 966 | }, 967 | } 968 | --------------------------------------------------------------------------------