├── .gitignore ├── 403.html ├── 404.html ├── 500.html ├── 503.html ├── LICENSE ├── README.md ├── dist └── styles.css ├── index.js ├── package.json ├── postcss.config.js ├── src ├── styles.css └── svg │ ├── 403-illustration.svg │ ├── 404-illustration.svg │ ├── 500-illustration.svg │ ├── 503-illustration.svg │ └── Group 20.svg ├── tailwind.js ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn-error.log 3 | -------------------------------------------------------------------------------- /403.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tailwind Starter Template 5 | 6 | 7 | 451 | 452 | 453 |
454 |
455 |
456 |
403
457 |
458 |

Sorry, the page you are looking for could not be found.

459 | 460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 | 469 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tailwind Starter Template 5 | 6 | 7 | 451 | 452 | 453 |
454 |
455 |
456 |
404
457 |
458 |

Sorry, the page you are looking for could not be found.

459 | 460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 | 469 | -------------------------------------------------------------------------------- /500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tailwind Starter Template 5 | 6 | 7 | 451 | 452 | 453 |
454 |
455 |
456 |
500
457 |
458 |

Sorry, the page you are looking for could not be found.

459 | 460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 | 469 | -------------------------------------------------------------------------------- /503.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tailwind Starter Template 5 | 6 | 7 | 451 | 452 | 453 |
454 |
455 |
456 |
503
457 |
458 |

Sorry, the page you are looking for could not be found.

459 | 460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 | 469 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Adam Wathan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS Webpack Starter Project 2 | 3 | This is an example of a super simple Webpack setup for using [Tailwind CSS](https://tailwindcss.com). 4 | 5 | To get started, clone the project and install the dependencies: 6 | 7 | ``` 8 | # Using npm 9 | npm install 10 | 11 | # Using Yarn 12 | yarn 13 | ``` 14 | 15 | After that, start up Webpack: 16 | 17 | ``` 18 | webpack --watch 19 | ``` 20 | 21 | Webpack will watch `/src/styles.css` and `/tailwind.js` and rebuild your stylesheet on every change. 22 | 23 | You can play around with `/index.html` to see the effects of your changes. 24 | 25 | ## Contributing 26 | 27 | Have a lot of experience with Webpack and suggestions on how we could improve this starter template? We'd love a PR! 28 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import styles from './src/styles.css' 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js", 5 | "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js", 6 | "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=webpack.config.js" 7 | }, 8 | "devDependencies": { 9 | "cross-env": "^5.1", 10 | "css-loader": "^0.28.7", 11 | "extract-text-webpack-plugin": "^3.0.2", 12 | "postcss": "^6.0.14", 13 | "postcss-loader": "^2.0.8", 14 | "style-loader": "^0.19.0", 15 | "tailwindcss": "^0.4.0", 16 | "webpack": "^3.8.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss')('./tailwind.js') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/svg/403-illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/404-illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/500-illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/503-illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/Group 20.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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': '#22292f', 50 | 'grey-darkest': '#3d4852', 51 | 'grey-darker': '#606f7b', 52 | 'grey-dark': '#8795a1', 53 | 'grey': '#b8c2cc', 54 | 'grey-light': '#dae1e7', 55 | 'grey-lighter': '#f1f5f8', 56 | 'grey-lightest': '#f8fafc', 57 | 'white': '#ffffff', 58 | 59 | 'red-darkest': '#3b0d0c', 60 | 'red-darker': '#621b18', 61 | 'red-dark': '#cc1f1a', 62 | 'red': '#e3342f', 63 | 'red-light': '#ef5753', 64 | 'red-lighter': '#f9acaa', 65 | 'red-lightest': '#fcebea', 66 | 67 | 'orange-darkest': '#462a16', 68 | 'orange-darker': '#613b1f', 69 | 'orange-dark': '#de751f', 70 | 'orange': '#f6993f', 71 | 'orange-light': '#faad63', 72 | 'orange-lighter': '#fcd9b6', 73 | 'orange-lightest': '#fff5eb', 74 | 75 | 'yellow-darkest': '#453411', 76 | 'yellow-darker': '#684f1d', 77 | 'yellow-dark': '#f2d024', 78 | 'yellow': '#ffed4a', 79 | 'yellow-light': '#fff382', 80 | 'yellow-lighter': '#fff9c2', 81 | 'yellow-lightest': '#fcfbeb', 82 | 83 | 'green-darkest': '#0f2f21', 84 | 'green-darker': '#1a4731', 85 | 'green-dark': '#1f9d55', 86 | 'green': '#38c172', 87 | 'green-light': '#51d88a', 88 | 'green-lighter': '#a2f5bf', 89 | 'green-lightest': '#e3fcec', 90 | 91 | 'teal-darkest': '#0d3331', 92 | 'teal-darker': '#20504f', 93 | 'teal-dark': '#38a89d', 94 | 'teal': '#4dc0b5', 95 | 'teal-light': '#64d5ca', 96 | 'teal-lighter': '#a0f0ed', 97 | 'teal-lightest': '#e8fffe', 98 | 99 | 'blue-darkest': '#12283a', 100 | 'blue-darker': '#1c3d5a', 101 | 'blue-dark': '#2779bd', 102 | 'blue': '#3490dc', 103 | 'blue-light': '#6cb2eb', 104 | 'blue-lighter': '#bcdefa', 105 | 'blue-lightest': '#eff8ff', 106 | 107 | 'indigo-darkest': '#191e38', 108 | 'indigo-darker': '#2f365f', 109 | 'indigo-dark': '#5661b3', 110 | 'indigo': '#6574cd', 111 | 'indigo-light': '#7886d7', 112 | 'indigo-lighter': '#b2b7ff', 113 | 'indigo-lightest': '#e6e8ff', 114 | 115 | 'purple-darkest': '#21183c', 116 | 'purple-darker': '#382b5f', 117 | 'purple-dark': '#794acf', 118 | 'purple': '#9561e2', 119 | 'purple-light': '#a779e9', 120 | 'purple-lighter': '#d6bbfc', 121 | 'purple-lightest': '#f3ebff', 122 | 123 | 'pink-darkest': '#451225', 124 | 'pink-darker': '#6f213f', 125 | 'pink-dark': '#eb5286', 126 | 'pink': '#f66d9b', 127 | 'pink-light': '#fa7ea8', 128 | 'pink-lighter': '#ffbbca', 129 | 'pink-lightest': '#ffebef', 130 | } 131 | 132 | module.exports = { 133 | 134 | /* 135 | |----------------------------------------------------------------------------- 136 | | Colors https://tailwindcss.com/docs/colors 137 | |----------------------------------------------------------------------------- 138 | | 139 | | The color palette defined above is also assigned to the "colors" key of 140 | | your Tailwind config. This makes it easy to access them in your CSS 141 | | using Tailwind's config helper. For example: 142 | | 143 | | .error { color: config('colors.red') } 144 | | 145 | */ 146 | 147 | colors: colors, 148 | 149 | 150 | /* 151 | |----------------------------------------------------------------------------- 152 | | Screens https://tailwindcss.com/docs/responsive-design 153 | |----------------------------------------------------------------------------- 154 | | 155 | | Screens in Tailwind are translated to CSS media queries. They define the 156 | | responsive breakpoints for your project. By default Tailwind takes a 157 | | "mobile first" approach, where each screen size represents a minimum 158 | | viewport width. Feel free to have as few or as many screens as you 159 | | want, naming them in whatever way you'd prefer for your project. 160 | | 161 | | Tailwind also allows for more complex screen definitions, which can be 162 | | useful in certain situations. Be sure to see the full responsive 163 | | documentation for a complete list of options. 164 | | 165 | | Class name: .{screen}:{utility} 166 | | 167 | */ 168 | 169 | screens: { 170 | 'sm': '576px', 171 | 'md': '768px', 172 | 'lg': '992px', 173 | 'xl': '1200px', 174 | }, 175 | 176 | 177 | /* 178 | |----------------------------------------------------------------------------- 179 | | Fonts https://tailwindcss.com/docs/fonts 180 | |----------------------------------------------------------------------------- 181 | | 182 | | Here is where you define your project's font stack, or font families. 183 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 184 | | If you're using custom fonts you'll need to import them prior to 185 | | defining them here. 186 | | 187 | | By default we provide a native font stack that works remarkably well on 188 | | any device or OS you're using, since it just uses the default fonts 189 | | provided by the platform. 190 | | 191 | | Class name: .font-{name} 192 | | 193 | */ 194 | 195 | fonts: { 196 | 'sans': [ 197 | '-apple-system', 198 | 'BlinkMacSystemFont', 199 | 'Segoe UI', 200 | 'Roboto', 201 | 'Oxygen', 202 | 'Ubuntu', 203 | 'Cantarell', 204 | 'Fira Sans', 205 | 'Droid Sans', 206 | 'Helvetica Neue', 207 | 'sans-serif', 208 | ], 209 | 'serif': [ 210 | 'Constantia', 211 | 'Lucida Bright', 212 | 'Lucidabright', 213 | 'Lucida Serif', 214 | 'Lucida', 215 | 'DejaVu Serif', 216 | 'Bitstream Vera Serif', 217 | 'Liberation Serif', 218 | 'Georgia', 219 | 'serif', 220 | ], 221 | 'mono': [ 222 | 'Menlo', 223 | 'Monaco', 224 | 'Consolas', 225 | 'Liberation Mono', 226 | 'Courier New', 227 | 'monospace', 228 | ] 229 | }, 230 | 231 | 232 | /* 233 | |----------------------------------------------------------------------------- 234 | | Text sizes https://tailwindcss.com/docs/text-sizing 235 | |----------------------------------------------------------------------------- 236 | | 237 | | Here is where you define your text sizes. Name these in whatever way 238 | | makes the most sense to you. We use size names by default, but 239 | | you're welcome to use a numeric scale or even something else 240 | | entirely. 241 | | 242 | | By default Tailwind uses the "rem" unit type for most measurements. 243 | | This allows you to set a root font size which all other sizes are 244 | | then based on. That said, you are free to use whatever units you 245 | | prefer, be it rems, ems, pixels or other. 246 | | 247 | | Class name: .text-{size} 248 | | 249 | */ 250 | 251 | textSizes: { 252 | 'xs': '.75rem', // 12px 253 | 'sm': '.875rem', // 14px 254 | 'base': '1rem', // 16px 255 | 'lg': '1.125rem', // 18px 256 | 'xl': '1.25rem', // 20px 257 | '2xl': '1.5rem', // 24px 258 | '3xl': '1.875rem', // 30px 259 | '4xl': '2.25rem', // 36px 260 | '5xl': '3rem', // 48px 261 | '15xl':'9rem', // 144px 262 | }, 263 | 264 | 265 | /* 266 | |----------------------------------------------------------------------------- 267 | | Font weights https://tailwindcss.com/docs/font-weight 268 | |----------------------------------------------------------------------------- 269 | | 270 | | Here is where you define your font weights. We've provided a list of 271 | | common font weight names with their respective numeric scale values 272 | | to get you started. It's unlikely that your project will require 273 | | all of these, so we recommend removing those you don't need. 274 | | 275 | | Class name: .font-{weight} 276 | | 277 | */ 278 | 279 | fontWeights: { 280 | 'hairline': 100, 281 | 'thin': 200, 282 | 'light': 300, 283 | 'normal': 400, 284 | 'medium': 500, 285 | 'semibold': 600, 286 | 'bold': 700, 287 | 'extrabold': 800, 288 | 'black': 900, 289 | }, 290 | 291 | 292 | /* 293 | |----------------------------------------------------------------------------- 294 | | Leading (line height) https://tailwindcss.com/docs/line-height 295 | |----------------------------------------------------------------------------- 296 | | 297 | | Here is where you define your line height values, or as we call 298 | | them in Tailwind, leadings. 299 | | 300 | | Class name: .leading-{size} 301 | | 302 | */ 303 | 304 | leading: { 305 | 'none': 1, 306 | 'tight': 1.25, 307 | 'normal': 1.5, 308 | 'loose': 2, 309 | }, 310 | 311 | 312 | /* 313 | |----------------------------------------------------------------------------- 314 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 315 | |----------------------------------------------------------------------------- 316 | | 317 | | Here is where you define your letter spacing values, or as we call 318 | | them in Tailwind, tracking. 319 | | 320 | | Class name: .tracking-{size} 321 | | 322 | */ 323 | 324 | tracking: { 325 | 'tight': '-0.05em', 326 | 'normal': '0', 327 | 'wide': '0.05em', 328 | }, 329 | 330 | 331 | /* 332 | |----------------------------------------------------------------------------- 333 | | Text colors https://tailwindcss.com/docs/text-color 334 | |----------------------------------------------------------------------------- 335 | | 336 | | Here is where you define your text colors. By default these use the 337 | | color palette we defined above, however you're welcome to set these 338 | | independently if that makes sense for your project. 339 | | 340 | | Class name: .text-{color} 341 | | 342 | */ 343 | 344 | textColors: colors, 345 | 346 | 347 | /* 348 | |----------------------------------------------------------------------------- 349 | | Background colors https://tailwindcss.com/docs/background-color 350 | |----------------------------------------------------------------------------- 351 | | 352 | | Here is where you define your background colors. By default these use 353 | | the color palette we defined above, however you're welcome to set 354 | | these independently if that makes sense for your project. 355 | | 356 | | Class name: .bg-{color} 357 | | 358 | */ 359 | 360 | backgroundColors: colors, 361 | 362 | 363 | /* 364 | |----------------------------------------------------------------------------- 365 | | Border widths https://tailwindcss.com/docs/border-width 366 | |----------------------------------------------------------------------------- 367 | | 368 | | Here is where you define your border widths. Take note that border 369 | | widths require a special "default" value set as well. This is the 370 | | width that will be used when you do not specify a border width. 371 | | 372 | | Class name: .border{-side?}{-width?} 373 | | 374 | */ 375 | 376 | borderWidths: { 377 | default: '1px', 378 | '0': '0', 379 | '2': '2px', 380 | '4': '4px', 381 | '8': '8px', 382 | }, 383 | 384 | 385 | /* 386 | |----------------------------------------------------------------------------- 387 | | Border colors https://tailwindcss.com/docs/border-color 388 | |----------------------------------------------------------------------------- 389 | | 390 | | Here is where you define your border colors. By default these use the 391 | | color palette we defined above, however you're welcome to set these 392 | | independently if that makes sense for your project. 393 | | 394 | | Take note that border colors require a special "default" value set 395 | | as well. This is the color that will be used when you do not 396 | | specify a border color. 397 | | 398 | | Class name: .border-{color} 399 | | 400 | */ 401 | 402 | borderColors: Object.assign({ default: colors['grey-light'] }, colors), 403 | 404 | 405 | /* 406 | |----------------------------------------------------------------------------- 407 | | Border radius https://tailwindcss.com/docs/border-radius 408 | |----------------------------------------------------------------------------- 409 | | 410 | | Here is where you define your border radius values. If a `default` radius 411 | | is provided, it will be made available as the non-suffixed `.rounded` 412 | | utility. 413 | | 414 | | If your scale includes a `0` value to reset already rounded corners, it's 415 | | a good idea to put it first so other values are able to override it. 416 | | 417 | | Class name: .rounded{-side?}{-size?} 418 | | 419 | */ 420 | 421 | borderRadius: { 422 | 'none': '0', 423 | 'sm': '.125rem', 424 | default: '.25rem', 425 | 'lg': '.5rem', 426 | 'full': '9999px', 427 | }, 428 | 429 | 430 | /* 431 | |----------------------------------------------------------------------------- 432 | | Width https://tailwindcss.com/docs/width 433 | |----------------------------------------------------------------------------- 434 | | 435 | | Here is where you define your width utility sizes. These can be 436 | | percentage based, pixels, rems, or any other units. By default 437 | | we provide a sensible rem based numeric scale, a percentage 438 | | based fraction scale, plus some other common use-cases. You 439 | | can, of course, modify these values as needed. 440 | | 441 | | 442 | | It's also worth mentioning that Tailwind automatically escapes 443 | | invalid CSS class name characters, which allows you to have 444 | | awesome classes like .w-2/3. 445 | | 446 | | Class name: .w-{size} 447 | | 448 | */ 449 | 450 | width: { 451 | 'auto': 'auto', 452 | 'px': '1px', 453 | '1': '0.25rem', 454 | '2': '0.5rem', 455 | '3': '0.75rem', 456 | '4': '1rem', 457 | '6': '1.5rem', 458 | '8': '2rem', 459 | '10': '2.5rem', 460 | '12': '3rem', 461 | '16': '4rem', 462 | '24': '6rem', 463 | '32': '8rem', 464 | '48': '12rem', 465 | '64': '16rem', 466 | '1/2': '50%', 467 | '1/3': '33.33333%', 468 | '2/3': '66.66667%', 469 | '1/4': '25%', 470 | '3/4': '75%', 471 | '1/5': '20%', 472 | '2/5': '40%', 473 | '3/5': '60%', 474 | '4/5': '80%', 475 | '1/6': '16.66667%', 476 | '5/6': '83.33333%', 477 | 'full': '100%', 478 | 'screen': '100vw' 479 | }, 480 | 481 | 482 | /* 483 | |----------------------------------------------------------------------------- 484 | | Height https://tailwindcss.com/docs/height 485 | |----------------------------------------------------------------------------- 486 | | 487 | | Here is where you define your height utility sizes. These can be 488 | | percentage based, pixels, rems, or any other units. By default 489 | | we provide a sensible rem based numeric scale plus some other 490 | | common use-cases. You can, of course, modify these values as 491 | | needed. 492 | | 493 | | Class name: .h-{size} 494 | | 495 | */ 496 | 497 | height: { 498 | 'auto': 'auto', 499 | 'px': '1px', 500 | '1': '0.25rem', 501 | '2': '0.5rem', 502 | '3': '0.75rem', 503 | '4': '1rem', 504 | '6': '1.5rem', 505 | '8': '2rem', 506 | '10': '2.5rem', 507 | '12': '3rem', 508 | '16': '4rem', 509 | '24': '6rem', 510 | '32': '8rem', 511 | '48': '12rem', 512 | '64': '16rem', 513 | 'full': '100%', 514 | 'screen': '100vh' 515 | }, 516 | 517 | 518 | /* 519 | |----------------------------------------------------------------------------- 520 | | Minimum width https://tailwindcss.com/docs/min-width 521 | |----------------------------------------------------------------------------- 522 | | 523 | | Here is where you define your minimum width utility sizes. These can 524 | | be percentage based, pixels, rems, or any other units. We provide a 525 | | couple common use-cases by default. You can, of course, modify 526 | | these values as needed. 527 | | 528 | | Class name: .min-w-{size} 529 | | 530 | */ 531 | 532 | minWidth: { 533 | '0': '0', 534 | 'full': '100%', 535 | }, 536 | 537 | 538 | /* 539 | |----------------------------------------------------------------------------- 540 | | Minimum height https://tailwindcss.com/docs/min-height 541 | |----------------------------------------------------------------------------- 542 | | 543 | | Here is where you define your minimum height utility sizes. These can 544 | | be percentage based, pixels, rems, or any other units. We provide a 545 | | few common use-cases by default. You can, of course, modify these 546 | | values as needed. 547 | | 548 | | Class name: .min-h-{size} 549 | | 550 | */ 551 | 552 | minHeight: { 553 | '0': '0', 554 | 'full': '100%', 555 | 'screen': '100vh' 556 | }, 557 | 558 | 559 | /* 560 | |----------------------------------------------------------------------------- 561 | | Maximum width https://tailwindcss.com/docs/max-width 562 | |----------------------------------------------------------------------------- 563 | | 564 | | Here is where you define your maximum width utility sizes. These can 565 | | be percentage based, pixels, rems, or any other units. By default 566 | | we provide a sensible rem based scale and a "full width" size, 567 | | which is basically a reset utility. You can, of course, 568 | | modify these values as needed. 569 | | 570 | | Class name: .max-w-{size} 571 | | 572 | */ 573 | 574 | maxWidth: { 575 | 'xs': '20rem', 576 | 'sm': '30rem', 577 | 'md': '40rem', 578 | 'lg': '50rem', 579 | 'xl': '60rem', 580 | '2xl': '70rem', 581 | '3xl': '80rem', 582 | '4xl': '90rem', 583 | '5xl': '100rem', 584 | 'full': '100%', 585 | }, 586 | 587 | 588 | /* 589 | |----------------------------------------------------------------------------- 590 | | Maximum height https://tailwindcss.com/docs/max-height 591 | |----------------------------------------------------------------------------- 592 | | 593 | | Here is where you define your maximum height utility sizes. These can 594 | | be percentage based, pixels, rems, or any other units. We provide a 595 | | couple common use-cases by default. You can, of course, modify 596 | | these values as needed. 597 | | 598 | | Class name: .max-h-{size} 599 | | 600 | */ 601 | 602 | maxHeight: { 603 | 'full': '100%', 604 | 'screen': '100vh', 605 | }, 606 | 607 | 608 | /* 609 | |----------------------------------------------------------------------------- 610 | | Padding https://tailwindcss.com/docs/padding 611 | |----------------------------------------------------------------------------- 612 | | 613 | | Here is where you define your padding utility sizes. These can be 614 | | percentage based, pixels, rems, or any other units. By default we 615 | | provide a sensible rem based numeric scale plus a couple other 616 | | common use-cases like "1px". You can, of course, modify these 617 | | values as needed. 618 | | 619 | | Class name: .p{side?}-{size} 620 | | 621 | */ 622 | 623 | padding: { 624 | 'px': '1px', 625 | '0': '0', 626 | '1': '0.25rem', 627 | '2': '0.5rem', 628 | '3': '0.75rem', 629 | '4': '1rem', 630 | '6': '1.5rem', 631 | '8': '2rem', 632 | 'full': '100%', 633 | }, 634 | 635 | 636 | /* 637 | |----------------------------------------------------------------------------- 638 | | Margin https://tailwindcss.com/docs/margin 639 | |----------------------------------------------------------------------------- 640 | | 641 | | Here is where you define your margin utility sizes. These can be 642 | | percentage based, pixels, rems, or any other units. By default we 643 | | provide a sensible rem based numeric scale plus a couple other 644 | | common use-cases like "1px". You can, of course, modify these 645 | | values as needed. 646 | | 647 | | Class name: .m{side?}-{size} 648 | | 649 | */ 650 | 651 | margin: { 652 | 'auto': 'auto', 653 | 'px': '1px', 654 | '0': '0', 655 | '1': '0.25rem', 656 | '2': '0.5rem', 657 | '3': '0.75rem', 658 | '4': '1rem', 659 | '6': '1.5rem', 660 | '8': '2rem', 661 | }, 662 | 663 | 664 | /* 665 | |----------------------------------------------------------------------------- 666 | | Negative margin https://tailwindcss.com/docs/negative-margin 667 | |----------------------------------------------------------------------------- 668 | | 669 | | Here is where you define your negative margin utility sizes. These can 670 | | be percentage based, pixels, rems, or any other units. By default we 671 | | provide matching values to the padding scale since these utilities 672 | | generally get used together. You can, of course, modify these 673 | | values as needed. 674 | | 675 | | Class name: .-m{side?}-{size} 676 | | 677 | */ 678 | 679 | negativeMargin: { 680 | 'px': '1px', 681 | '0': '0', 682 | '1': '0.25rem', 683 | '2': '0.5rem', 684 | '3': '0.75rem', 685 | '4': '1rem', 686 | '6': '1.5rem', 687 | '8': '2rem', 688 | }, 689 | 690 | 691 | /* 692 | |----------------------------------------------------------------------------- 693 | | Shadows https://tailwindcss.com/docs/shadows 694 | |----------------------------------------------------------------------------- 695 | | 696 | | Here is where you define your shadow utilities. As you can see from 697 | | the defaults we provide, it's possible to apply multiple shadows 698 | | per utility using comma separation. 699 | | 700 | | If a `default` shadow is provided, it will be made available as the non- 701 | | suffixed `.shadow` utility. 702 | | 703 | | Class name: .shadow-{size?} 704 | | 705 | */ 706 | 707 | shadows: { 708 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 709 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 710 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 711 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 712 | 'none': 'none', 713 | }, 714 | 715 | 716 | /* 717 | |----------------------------------------------------------------------------- 718 | | Z-index https://tailwindcss.com/docs/z-index 719 | |----------------------------------------------------------------------------- 720 | | 721 | | Here is where you define your z-index utility values. By default we 722 | | provide a sensible numeric scale. You can, of course, modify these 723 | | values as needed. 724 | | 725 | | Class name: .z-{index} 726 | | 727 | */ 728 | 729 | zIndex: { 730 | 'auto': 'auto', 731 | '0': 0, 732 | '10': 10, 733 | '20': 20, 734 | '30': 30, 735 | '40': 40, 736 | '50': 50, 737 | }, 738 | 739 | 740 | /* 741 | |----------------------------------------------------------------------------- 742 | | Opacity https://tailwindcss.com/docs/opacity 743 | |----------------------------------------------------------------------------- 744 | | 745 | | Here is where you define your opacity utility values. By default we 746 | | provide a sensible numeric scale. You can, of course, modify these 747 | | values as needed. 748 | | 749 | | Class name: .opacity-{name} 750 | | 751 | */ 752 | 753 | opacity: { 754 | '0': '0', 755 | '25': '.25', 756 | '50': '.5', 757 | '75': '.75', 758 | '100': '1', 759 | }, 760 | 761 | 762 | /* 763 | |----------------------------------------------------------------------------- 764 | | SVG fill https://tailwindcss.com/docs/svg 765 | |----------------------------------------------------------------------------- 766 | | 767 | | Here is where you define your SVG fill colors. By default we just provide 768 | | `fill-current` which sets the fill to the current text color. This lets you 769 | | specify a fill color using existing text color utilities and helps keep the 770 | | generated CSS file size down. 771 | | 772 | | Class name: .fill-{name} 773 | | 774 | */ 775 | 776 | svgFill: { 777 | 'current': 'currentColor', 778 | }, 779 | 780 | 781 | /* 782 | |----------------------------------------------------------------------------- 783 | | SVG stroke https://tailwindcss.com/docs/svg 784 | |----------------------------------------------------------------------------- 785 | | 786 | | Here is where you define your SVG stroke colors. By default we just provide 787 | | `stroke-current` which sets the stroke to the current text color. This lets 788 | | you specify a stroke color using existing text color utilities and helps 789 | | keep the generated CSS file size down. 790 | | 791 | | Class name: .stroke-{name} 792 | | 793 | */ 794 | 795 | svgStroke: { 796 | 'current': 'currentColor', 797 | }, 798 | 799 | 800 | /* 801 | |----------------------------------------------------------------------------- 802 | | Modules https://tailwindcss.com/docs/configuration#modules 803 | |----------------------------------------------------------------------------- 804 | | 805 | | Here is where you control which modules are generated and what variants are 806 | | generated for each of those modules. 807 | | 808 | | Currently supported variants: 'responsive', 'hover', 'focus' 809 | | 810 | | To disable a module completely, use `false` instead of an array. 811 | | 812 | */ 813 | 814 | modules: { 815 | appearance: ['responsive'], 816 | backgroundAttachment: ['responsive'], 817 | backgroundColors: ['responsive', 'hover'], 818 | backgroundPosition: ['responsive'], 819 | backgroundRepeat: ['responsive'], 820 | backgroundSize: ['responsive'], 821 | borderColors: ['responsive', 'hover'], 822 | borderRadius: ['responsive'], 823 | borderStyle: ['responsive'], 824 | borderWidths: ['responsive'], 825 | cursor: ['responsive'], 826 | display: ['responsive'], 827 | flexbox: ['responsive'], 828 | float: ['responsive'], 829 | fonts: ['responsive'], 830 | fontWeights: ['responsive', 'hover'], 831 | height: ['responsive'], 832 | leading: ['responsive'], 833 | lists: ['responsive'], 834 | margin: ['responsive'], 835 | maxHeight: ['responsive'], 836 | maxWidth: ['responsive'], 837 | minHeight: ['responsive'], 838 | minWidth: ['responsive'], 839 | negativeMargin: ['responsive'], 840 | opacity: ['responsive'], 841 | overflow: ['responsive'], 842 | padding: ['responsive'], 843 | pointerEvents: ['responsive'], 844 | position: ['responsive'], 845 | resize: ['responsive'], 846 | shadows: ['responsive'], 847 | svgFill: [], 848 | svgStroke: [], 849 | textAlign: ['responsive'], 850 | textColors: ['responsive', 'hover'], 851 | textSizes: ['responsive'], 852 | textStyle: ['responsive', 'hover'], 853 | tracking: ['responsive'], 854 | userSelect: ['responsive'], 855 | verticalAlign: ['responsive'], 856 | visibility: ['responsive'], 857 | whitespace: ['responsive'], 858 | width: ['responsive'], 859 | zIndex: ['responsive'], 860 | }, 861 | 862 | 863 | /* 864 | |----------------------------------------------------------------------------- 865 | | Advanced Options https://tailwindcss.com/docs/configuration#options 866 | |----------------------------------------------------------------------------- 867 | | 868 | | Here is where you can tweak advanced configuration options. We recommend 869 | | leaving these options alone unless you absolutely need to change them. 870 | | 871 | */ 872 | 873 | options: { 874 | prefix: '', 875 | important: false, 876 | separator: ':', 877 | }, 878 | 879 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 2 | const path = require('path') 3 | 4 | module.exports = { 5 | entry: './index.js', 6 | output: { 7 | path: path.resolve(__dirname, 'dist'), 8 | filename: 'styles.css', 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.css$/, 14 | use: ExtractTextPlugin.extract({ 15 | fallback: 'style-loader', 16 | use: [ 17 | { loader: 'css-loader', options: { importLoaders: 1 } }, 18 | 'postcss-loader' 19 | ] 20 | }) 21 | } 22 | ] 23 | }, 24 | plugins: [ 25 | new ExtractTextPlugin('styles.css') 26 | ] 27 | } 28 | --------------------------------------------------------------------------------