custom-radio-buttons

├── babel.config.js ├── public ├── favicon.ico └── index.html ├── src ├── assets │ ├── logo.png │ └── css │ │ └── main.css ├── main.js ├── App.vue └── components │ ├── HelloWorld.vue │ └── SelectablePlan.vue ├── .gitignore ├── README.md ├── .postcssrc.js ├── vue.config.js ├── package.json └── tailwind.js /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/custom-radio-buttons/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/custom-radio-buttons/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # custom-radio-buttons 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | const purgecss = require('@fullhuman/postcss-purgecss') 2 | 3 | class TailwindExtractor { 4 | static extract(content) { 5 | return content.match(/[A-Za-z0-9-_:\/]+/g) || []; 6 | } 7 | } 8 | 9 | module.exports = { 10 | "plugins": [ 11 | require('tailwindcss')('./tailwind.js'), 12 | require('autoprefixer')(), 13 | purgecss({ 14 | content: ['./**/*.html', './src/**/*.vue', './src/**/*.js'], 15 | extractors: [ 16 | { 17 | extractor: TailwindExtractor, 18 | extensions: ["html", "js", "vue"] 19 | } 20 | ] 21 | }) 22 | 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | custom-radio-buttons 9 | 10 | 11 | 14 |

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

{{ msg }}

Installed CLI Plugins

Essential Links

Ecosystem

{{ this.planName }}