Tailwind Style Guide

├── .gitignore ├── README.md ├── dist ├── configs │ └── .gitkeep ├── index.html └── site.js ├── index.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── App.vue │ ├── BackgroundColors.vue │ ├── BorderColors.vue │ ├── BorderRadius.vue │ ├── BorderWidths.vue │ ├── ConfigSwitcher.vue │ ├── DemoPanel.vue │ ├── FontWeights.vue │ ├── Heights.vue │ ├── Leadings.vue │ ├── Margins.vue │ ├── ModulesEnabled.vue │ ├── Opacities.vue │ ├── OtherWidths.vue │ ├── Paddings.vue │ ├── PercentageWidths.vue │ ├── Shadows.vue │ ├── TextColors.vue │ ├── TextSizes.vue │ └── Trackings.vue ├── index.html ├── main.js ├── styles.css └── tailwind.css ├── tailwind.config.js ├── tsg-screenshot.png └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | twsg 3 | public/configs 4 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Tailwind Style Guide Generator 2 | --- 3 | 4 | ![Imgur](https://i.imgur.com/5SnyGCS.gif) 5 | 6 | ## Installation 7 | 8 | ```bash 9 | $ git clone https://github.com/garygreen/tsg.git 10 | ``` 11 | 12 | ## Usage 13 | 14 | In the cloned tsg folder, run: 15 | 16 | ```bash 17 | $ node index build 18 | ``` 19 | 20 | Example: 21 | 22 | ```bash 23 | $ node index build tailwind.config.js tailwind-generated.css 24 | ``` 25 | 26 | ## npm installation 27 | 28 | WIP 29 | 30 | ## Features 31 | 32 | * Shows: Background Colors, Border Colors/Radius/Widths, Font Weights, Heights, Leadings, Margins, Opacities, Widths, Paddings, Shadows, Text Colors/Sizes, Trackings. 33 | * Demo panel, for easy testing of utility classes. 34 | * Multiple config support - useful if you have seperate tailwind configs for frontend/backend. 35 | 36 | ## Optional Usage Parameters 37 | 38 | `--output ` - specify a custom path to output the generated docs (by default it will be `tsg`) 39 | 40 | `--name=` - specify a custom name for the generated config (by default it will be `site`), this is useful for the multi config support. 41 | 42 | ## Upcoming Features 43 | 44 | * Implement remaining config options: fonts, min widths, min height, max width, max height, negative margins, zIndex, svgFill, svgStroke 45 | * Support for prefixed configs and different seperator 46 | * Improved states support (hover/focus etc) 47 | * Simplify build options so don't need to pass generated tailwind css path 48 | * Custom/general utility classes support 49 | * Components support 50 | * Footprint charts - per module and overall filesize. 51 | * Webpack plugin which can automatically trigger generation of style guide 52 | * Ongoing improvements to general style / UI of each component 53 | 54 | ## Contributing 55 | 56 | Although this library is under heavy development, contributions are welcome via a PR. If there are any large PRs being undertaken, it's best to create an issue first to discuss implementation details and see if the PR will likely be accepted. 57 | 58 | ## Alternatives 59 | 60 | This generator was heavily inspired by Sam Selikoff's [ember-cli-tailwind](https://github.com/embermap/ember-cli-tailwind). Mad props go out to him :-) 61 | -------------------------------------------------------------------------------- /dist/configs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garygreen/tsg/931f6d208a0868b3976f565b9362c6072c54ad4c/dist/configs/.gitkeep -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind Style Guide 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | var program = require('commander'); 5 | var ncp = require('ncp').ncp; 6 | 7 | program 8 | .command('build') 9 | .usage(' [options]', 'Build style guide for the given tailwind config and generated tailwind styles css paths.') 10 | .option('--name [name]', 'Set friendly, unique name for the config file.', 'site') 11 | .option('--output [path]', 'Set output path for the generated docs.', './twsg') 12 | .action(function(configPath, cssPath, cmd) { 13 | build({ 14 | configPath: configPath, 15 | cssPath: cssPath, 16 | output: cmd.output, 17 | name: cmd.name 18 | }); 19 | }); 20 | 21 | function copyDocs(options, cb) 22 | { 23 | ncp(path.resolve(__dirname, 'dist'), path.resolve(options.output), cb); 24 | } 25 | 26 | function syncConfig(options) 27 | { 28 | var tailwindConfig = require(path.resolve(options.configPath)); 29 | 30 | var configPath = path.resolve(options.output, 'configs'); 31 | 32 | if (! fs.existsSync(configPath)) { 33 | fs.mkdir(configPath); 34 | } 35 | 36 | fs.writeFileSync(path.resolve(configPath, options.name + '.js'), 'window.tailwindConfig = ' + JSON.stringify(tailwindConfig)); 37 | 38 | var configFiles = fs.readdirSync(configPath).filter(function(path) { 39 | return path.match(/\.js$/); 40 | }); 41 | 42 | fs.writeFileSync(path.resolve(options.output, 'manifest.js'), ` 43 | window.configFiles = ${JSON.stringify(configFiles)}; 44 | `); 45 | 46 | console.log('Successfully generated docs and wrote config to path: ' + path.resolve(options.output)); 47 | console.log('Launch the index.html file in that folder to see the generated docs.'); 48 | } 49 | 50 | function build(options) 51 | { 52 | copyDocs(options, function() { 53 | ncp(path.resolve(options.cssPath), path.resolve(options.output, 'configs', options.name + '.css')); 54 | syncConfig(options); 55 | }); 56 | } 57 | 58 | program.parse(process.argv); 59 | 60 | if (program.args.length === 0) { 61 | program.help() 62 | process.exit() 63 | } 64 | 65 | module.exports = { 66 | build: build 67 | }; 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsg", 3 | "version": "1.0.0", 4 | "description": "The Tailwind Style Guide Generator - generate personalized style guide from your Tailwind config.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build:css": "tailwind build src/styles.css -c ./tailwind.config.js -o ./src/tailwind.css", 9 | "build": "webpack", 10 | "dist": "SET NODE_ENV=production && npm run build", 11 | "watch": "webpack --watch" 12 | }, 13 | "author": "Gary Green", 14 | "license": "ISC", 15 | "bin": { 16 | "tsg": "index.js" 17 | }, 18 | "dependencies": { 19 | "commander": "^2.15.1", 20 | "ncp": "^2.0.0" 21 | }, 22 | "devDependencies": { 23 | "css-loader": "^0.28.11", 24 | "html-webpack-plugin": "^3.1.0", 25 | "style-loader": "^0.20.3", 26 | "tailwind": "^2.0.4", 27 | "tailwindcss": "^0.5.2", 28 | "uglifyjs-webpack-plugin": "^1.2.4", 29 | "vue": "^2.5.16", 30 | "vue-loader": "^14.2.2", 31 | "vue-template-compiler": "^2.5.16", 32 | "webpack": "^3.11.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/App.vue: -------------------------------------------------------------------------------- 1 | 198 | 199 | 222 | -------------------------------------------------------------------------------- /src/components/BackgroundColors.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | -------------------------------------------------------------------------------- /src/components/BorderColors.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/BorderRadius.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/BorderWidths.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/ConfigSwitcher.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/DemoPanel.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/FontWeights.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Heights.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Leadings.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Margins.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/ModulesEnabled.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | var TailwindModules = Vue.component('tw-modules', { 13 | props: ['config', 'module'], 14 | template: ` 15 |

16 | 17 | {{ screen }}: 18 | 19 | 24 |

25 | ` 26 | }); -------------------------------------------------------------------------------- /src/components/Opacities.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/OtherWidths.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Paddings.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/PercentageWidths.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Shadows.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/TextColors.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/TextSizes.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Trackings.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind Style Guide 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './components/App.vue'; 3 | import './tailwind.css'; 4 | 5 | var app = { 6 | el: '#app', 7 | render: function(createElement) { 8 | return createElement(App); 9 | } 10 | }; 11 | 12 | window.vm = new Vue(app); -------------------------------------------------------------------------------- /src/styles.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 | */ -------------------------------------------------------------------------------- /tailwind.config.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 | 'system-ui', 198 | 'BlinkMacSystemFont', 199 | '-apple-system', 200 | 'Segoe UI', 201 | 'Roboto', 202 | 'Oxygen', 203 | 'Ubuntu', 204 | 'Cantarell', 205 | 'Fira Sans', 206 | 'Droid Sans', 207 | 'Helvetica Neue', 208 | 'sans-serif', 209 | ], 210 | 'serif': [ 211 | 'Constantia', 212 | 'Lucida Bright', 213 | 'Lucidabright', 214 | 'Lucida Serif', 215 | 'Lucida', 216 | 'DejaVu Serif', 217 | 'Bitstream Vera Serif', 218 | 'Liberation Serif', 219 | 'Georgia', 220 | 'serif', 221 | ], 222 | 'mono': [ 223 | 'Menlo', 224 | 'Monaco', 225 | 'Consolas', 226 | 'Liberation Mono', 227 | 'Courier New', 228 | 'monospace', 229 | ] 230 | }, 231 | 232 | 233 | /* 234 | |----------------------------------------------------------------------------- 235 | | Text sizes https://tailwindcss.com/docs/text-sizing 236 | |----------------------------------------------------------------------------- 237 | | 238 | | Here is where you define your text sizes. Name these in whatever way 239 | | makes the most sense to you. We use size names by default, but 240 | | you're welcome to use a numeric scale or even something else 241 | | entirely. 242 | | 243 | | By default Tailwind uses the "rem" unit type for most measurements. 244 | | This allows you to set a root font size which all other sizes are 245 | | then based on. That said, you are free to use whatever units you 246 | | prefer, be it rems, ems, pixels or other. 247 | | 248 | | Class name: .text-{size} 249 | | 250 | */ 251 | 252 | textSizes: { 253 | 'xs': '.75rem', // 12px 254 | 'sm': '.875rem', // 14px 255 | 'base': '1rem', // 16px 256 | 'lg': '1.125rem', // 18px 257 | 'xl': '1.25rem', // 20px 258 | '2xl': '1.5rem', // 24px 259 | '3xl': '1.875rem', // 30px 260 | '4xl': '2.25rem', // 36px 261 | '5xl': '3rem', // 48px 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 | | Background sizes https://tailwindcss.com/docs/background-size 366 | |----------------------------------------------------------------------------- 367 | | 368 | | Here is where you define your background sizes. We provide some common 369 | | values that are useful in most projects, but feel free to add other sizes 370 | | that are specific to your project here as well. 371 | | 372 | | Class name: .bg-{size} 373 | | 374 | */ 375 | 376 | backgroundSize: { 377 | 'auto': 'auto', 378 | 'cover': 'cover', 379 | 'contain': 'contain', 380 | }, 381 | 382 | 383 | /* 384 | |----------------------------------------------------------------------------- 385 | | Border widths https://tailwindcss.com/docs/border-width 386 | |----------------------------------------------------------------------------- 387 | | 388 | | Here is where you define your border widths. Take note that border 389 | | widths require a special "default" value set as well. This is the 390 | | width that will be used when you do not specify a border width. 391 | | 392 | | Class name: .border{-side?}{-width?} 393 | | 394 | */ 395 | 396 | borderWidths: { 397 | default: '1px', 398 | '0': '0', 399 | '2': '2px', 400 | '4': '4px', 401 | '8': '8px', 402 | }, 403 | 404 | 405 | /* 406 | |----------------------------------------------------------------------------- 407 | | Border colors https://tailwindcss.com/docs/border-color 408 | |----------------------------------------------------------------------------- 409 | | 410 | | Here is where you define your border colors. By default these use the 411 | | color palette we defined above, however you're welcome to set these 412 | | independently if that makes sense for your project. 413 | | 414 | | Take note that border colors require a special "default" value set 415 | | as well. This is the color that will be used when you do not 416 | | specify a border color. 417 | | 418 | | Class name: .border-{color} 419 | | 420 | */ 421 | 422 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 423 | 424 | 425 | /* 426 | |----------------------------------------------------------------------------- 427 | | Border radius https://tailwindcss.com/docs/border-radius 428 | |----------------------------------------------------------------------------- 429 | | 430 | | Here is where you define your border radius values. If a `default` radius 431 | | is provided, it will be made available as the non-suffixed `.rounded` 432 | | utility. 433 | | 434 | | If your scale includes a `0` value to reset already rounded corners, it's 435 | | a good idea to put it first so other values are able to override it. 436 | | 437 | | Class name: .rounded{-side?}{-size?} 438 | | 439 | */ 440 | 441 | borderRadius: { 442 | 'none': '0', 443 | 'sm': '.125rem', 444 | default: '.25rem', 445 | 'lg': '.5rem', 446 | 'full': '9999px', 447 | }, 448 | 449 | 450 | /* 451 | |----------------------------------------------------------------------------- 452 | | Width https://tailwindcss.com/docs/width 453 | |----------------------------------------------------------------------------- 454 | | 455 | | Here is where you define your width utility sizes. These can be 456 | | percentage based, pixels, rems, or any other units. By default 457 | | we provide a sensible rem based numeric scale, a percentage 458 | | based fraction scale, plus some other common use-cases. You 459 | | can, of course, modify these values as needed. 460 | | 461 | | 462 | | It's also worth mentioning that Tailwind automatically escapes 463 | | invalid CSS class name characters, which allows you to have 464 | | awesome classes like .w-2/3. 465 | | 466 | | Class name: .w-{size} 467 | | 468 | */ 469 | 470 | width: { 471 | 'auto': 'auto', 472 | 'px': '1px', 473 | '1': '0.25rem', 474 | '2': '0.5rem', 475 | '3': '0.75rem', 476 | '4': '1rem', 477 | '6': '1.5rem', 478 | '8': '2rem', 479 | '10': '2.5rem', 480 | '12': '3rem', 481 | '16': '4rem', 482 | '24': '6rem', 483 | '32': '8rem', 484 | '48': '12rem', 485 | '64': '16rem', 486 | '70': '20rem', 487 | '1/2': '50%', 488 | '1/3': '33.33333%', 489 | '2/3': '66.66667%', 490 | '1/4': '25%', 491 | '3/4': '75%', 492 | '1/5': '20%', 493 | '2/5': '40%', 494 | '3/5': '60%', 495 | '4/5': '80%', 496 | '1/6': '16.66667%', 497 | '5/6': '83.33333%', 498 | 'full': '100%', 499 | 'screen': '100vw' 500 | }, 501 | 502 | 503 | /* 504 | |----------------------------------------------------------------------------- 505 | | Height https://tailwindcss.com/docs/height 506 | |----------------------------------------------------------------------------- 507 | | 508 | | Here is where you define your height utility sizes. These can be 509 | | percentage based, pixels, rems, or any other units. By default 510 | | we provide a sensible rem based numeric scale plus some other 511 | | common use-cases. You can, of course, modify these values as 512 | | needed. 513 | | 514 | | Class name: .h-{size} 515 | | 516 | */ 517 | 518 | height: { 519 | 'auto': 'auto', 520 | 'px': '1px', 521 | '1': '0.25rem', 522 | '2': '0.5rem', 523 | '3': '0.75rem', 524 | '4': '1rem', 525 | '6': '1.5rem', 526 | '8': '2rem', 527 | '10': '2.5rem', 528 | '12': '3rem', 529 | '16': '4rem', 530 | '24': '6rem', 531 | '32': '8rem', 532 | '48': '12rem', 533 | '64': '16rem', 534 | 'full': '100%', 535 | 'screen': '100vh' 536 | }, 537 | 538 | 539 | /* 540 | |----------------------------------------------------------------------------- 541 | | Minimum width https://tailwindcss.com/docs/min-width 542 | |----------------------------------------------------------------------------- 543 | | 544 | | Here is where you define your minimum width utility sizes. These can 545 | | be percentage based, pixels, rems, or any other units. We provide a 546 | | couple common use-cases by default. You can, of course, modify 547 | | these values as needed. 548 | | 549 | | Class name: .min-w-{size} 550 | | 551 | */ 552 | 553 | minWidth: { 554 | '0': '0', 555 | 'full': '100%', 556 | }, 557 | 558 | 559 | /* 560 | |----------------------------------------------------------------------------- 561 | | Minimum height https://tailwindcss.com/docs/min-height 562 | |----------------------------------------------------------------------------- 563 | | 564 | | Here is where you define your minimum height utility sizes. These can 565 | | be percentage based, pixels, rems, or any other units. We provide a 566 | | few common use-cases by default. You can, of course, modify these 567 | | values as needed. 568 | | 569 | | Class name: .min-h-{size} 570 | | 571 | */ 572 | 573 | minHeight: { 574 | '0': '0', 575 | 'full': '100%', 576 | 'screen': '100vh' 577 | }, 578 | 579 | 580 | /* 581 | |----------------------------------------------------------------------------- 582 | | Maximum width https://tailwindcss.com/docs/max-width 583 | |----------------------------------------------------------------------------- 584 | | 585 | | Here is where you define your maximum width utility sizes. These can 586 | | be percentage based, pixels, rems, or any other units. By default 587 | | we provide a sensible rem based scale and a "full width" size, 588 | | which is basically a reset utility. You can, of course, 589 | | modify these values as needed. 590 | | 591 | | Class name: .max-w-{size} 592 | | 593 | */ 594 | 595 | maxWidth: { 596 | 'xs': '20rem', 597 | 'sm': '30rem', 598 | 'md': '40rem', 599 | 'lg': '50rem', 600 | 'xl': '60rem', 601 | '2xl': '70rem', 602 | '3xl': '80rem', 603 | '4xl': '90rem', 604 | '5xl': '100rem', 605 | 'full': '100%', 606 | }, 607 | 608 | 609 | /* 610 | |----------------------------------------------------------------------------- 611 | | Maximum height https://tailwindcss.com/docs/max-height 612 | |----------------------------------------------------------------------------- 613 | | 614 | | Here is where you define your maximum height utility sizes. These can 615 | | be percentage based, pixels, rems, or any other units. We provide a 616 | | couple common use-cases by default. You can, of course, modify 617 | | these values as needed. 618 | | 619 | | Class name: .max-h-{size} 620 | | 621 | */ 622 | 623 | maxHeight: { 624 | 'full': '100%', 625 | 'screen': '100vh', 626 | }, 627 | 628 | 629 | /* 630 | |----------------------------------------------------------------------------- 631 | | Padding https://tailwindcss.com/docs/padding 632 | |----------------------------------------------------------------------------- 633 | | 634 | | Here is where you define your padding utility sizes. These can be 635 | | percentage based, pixels, rems, or any other units. By default we 636 | | provide a sensible rem based numeric scale plus a couple other 637 | | common use-cases like "1px". You can, of course, modify these 638 | | values as needed. 639 | | 640 | | Class name: .p{side?}-{size} 641 | | 642 | */ 643 | 644 | padding: { 645 | 'px': '1px', 646 | '0': '0', 647 | '1': '0.25rem', 648 | '2': '0.5rem', 649 | '3': '0.75rem', 650 | '4': '1rem', 651 | '6': '1.5rem', 652 | '8': '2rem', 653 | }, 654 | 655 | 656 | /* 657 | |----------------------------------------------------------------------------- 658 | | Margin https://tailwindcss.com/docs/margin 659 | |----------------------------------------------------------------------------- 660 | | 661 | | Here is where you define your margin utility sizes. These can be 662 | | percentage based, pixels, rems, or any other units. By default we 663 | | provide a sensible rem based numeric scale plus a couple other 664 | | common use-cases like "1px". You can, of course, modify these 665 | | values as needed. 666 | | 667 | | Class name: .m{side?}-{size} 668 | | 669 | */ 670 | 671 | margin: { 672 | 'auto': 'auto', 673 | 'px': '1px', 674 | '0': '0', 675 | '1': '0.25rem', 676 | '2': '0.5rem', 677 | '3': '0.75rem', 678 | '4': '1rem', 679 | '6': '1.5rem', 680 | '8': '2rem', 681 | }, 682 | 683 | 684 | /* 685 | |----------------------------------------------------------------------------- 686 | | Negative margin https://tailwindcss.com/docs/negative-margin 687 | |----------------------------------------------------------------------------- 688 | | 689 | | Here is where you define your negative margin utility sizes. These can 690 | | be percentage based, pixels, rems, or any other units. By default we 691 | | provide matching values to the padding scale since these utilities 692 | | generally get used together. You can, of course, modify these 693 | | values as needed. 694 | | 695 | | Class name: .-m{side?}-{size} 696 | | 697 | */ 698 | 699 | negativeMargin: { 700 | 'px': '1px', 701 | '0': '0', 702 | '1': '0.25rem', 703 | '2': '0.5rem', 704 | '3': '0.75rem', 705 | '4': '1rem', 706 | '6': '1.5rem', 707 | '8': '2rem', 708 | }, 709 | 710 | 711 | /* 712 | |----------------------------------------------------------------------------- 713 | | Shadows https://tailwindcss.com/docs/shadows 714 | |----------------------------------------------------------------------------- 715 | | 716 | | Here is where you define your shadow utilities. As you can see from 717 | | the defaults we provide, it's possible to apply multiple shadows 718 | | per utility using comma separation. 719 | | 720 | | If a `default` shadow is provided, it will be made available as the non- 721 | | suffixed `.shadow` utility. 722 | | 723 | | Class name: .shadow-{size?} 724 | | 725 | */ 726 | 727 | shadows: { 728 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 729 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 730 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 731 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 732 | 'none': 'none', 733 | }, 734 | 735 | 736 | /* 737 | |----------------------------------------------------------------------------- 738 | | Z-index https://tailwindcss.com/docs/z-index 739 | |----------------------------------------------------------------------------- 740 | | 741 | | Here is where you define your z-index utility values. By default we 742 | | provide a sensible numeric scale. You can, of course, modify these 743 | | values as needed. 744 | | 745 | | Class name: .z-{index} 746 | | 747 | */ 748 | 749 | zIndex: { 750 | 'auto': 'auto', 751 | '0': 0, 752 | '10': 10, 753 | '20': 20, 754 | '30': 30, 755 | '40': 40, 756 | '50': 50, 757 | }, 758 | 759 | 760 | /* 761 | |----------------------------------------------------------------------------- 762 | | Opacity https://tailwindcss.com/docs/opacity 763 | |----------------------------------------------------------------------------- 764 | | 765 | | Here is where you define your opacity utility values. By default we 766 | | provide a sensible numeric scale. You can, of course, modify these 767 | | values as needed. 768 | | 769 | | Class name: .opacity-{name} 770 | | 771 | */ 772 | 773 | opacity: { 774 | '0': '0', 775 | '25': '.25', 776 | '50': '.5', 777 | '75': '.75', 778 | '100': '1', 779 | }, 780 | 781 | 782 | /* 783 | |----------------------------------------------------------------------------- 784 | | SVG fill https://tailwindcss.com/docs/svg 785 | |----------------------------------------------------------------------------- 786 | | 787 | | Here is where you define your SVG fill colors. By default we just provide 788 | | `fill-current` which sets the fill to the current text color. This lets you 789 | | specify a fill color using existing text color utilities and helps keep the 790 | | generated CSS file size down. 791 | | 792 | | Class name: .fill-{name} 793 | | 794 | */ 795 | 796 | svgFill: { 797 | 'current': 'currentColor', 798 | }, 799 | 800 | 801 | /* 802 | |----------------------------------------------------------------------------- 803 | | SVG stroke https://tailwindcss.com/docs/svg 804 | |----------------------------------------------------------------------------- 805 | | 806 | | Here is where you define your SVG stroke colors. By default we just provide 807 | | `stroke-current` which sets the stroke to the current text color. This lets 808 | | you specify a stroke color using existing text color utilities and helps 809 | | keep the generated CSS file size down. 810 | | 811 | | Class name: .stroke-{name} 812 | | 813 | */ 814 | 815 | svgStroke: { 816 | 'current': 'currentColor', 817 | }, 818 | 819 | 820 | /* 821 | |----------------------------------------------------------------------------- 822 | | Modules https://tailwindcss.com/docs/configuration#modules 823 | |----------------------------------------------------------------------------- 824 | | 825 | | Here is where you control which modules are generated and what variants are 826 | | generated for each of those modules. 827 | | 828 | | Currently supported variants: 829 | | - responsive 830 | | - hover 831 | | - focus 832 | | - active 833 | | - group-hover 834 | | 835 | | To disable a module completely, use `false` instead of an array. 836 | | 837 | */ 838 | 839 | modules: { 840 | appearance: ['responsive'], 841 | backgroundAttachment: ['responsive'], 842 | backgroundColors: ['responsive', 'hover'], 843 | backgroundPosition: ['responsive'], 844 | backgroundRepeat: ['responsive'], 845 | backgroundSize: ['responsive'], 846 | borderColors: ['responsive', 'hover'], 847 | borderRadius: ['responsive'], 848 | borderStyle: ['responsive'], 849 | borderWidths: ['responsive'], 850 | cursor: ['responsive'], 851 | display: ['responsive'], 852 | flexbox: ['responsive'], 853 | float: ['responsive'], 854 | fonts: ['responsive'], 855 | fontWeights: ['responsive', 'hover'], 856 | height: ['responsive'], 857 | leading: ['responsive'], 858 | lists: ['responsive'], 859 | margin: ['responsive'], 860 | maxHeight: ['responsive'], 861 | maxWidth: ['responsive'], 862 | minHeight: ['responsive'], 863 | minWidth: ['responsive'], 864 | negativeMargin: ['responsive'], 865 | opacity: ['responsive'], 866 | overflow: ['responsive'], 867 | padding: ['responsive'], 868 | pointerEvents: ['responsive'], 869 | position: ['responsive'], 870 | resize: ['responsive'], 871 | shadows: ['responsive'], 872 | svgFill: [], 873 | svgStroke: [], 874 | textAlign: ['responsive'], 875 | textColors: ['responsive', 'hover'], 876 | textSizes: ['responsive'], 877 | textStyle: ['responsive', 'hover'], 878 | tracking: ['responsive'], 879 | userSelect: ['responsive'], 880 | verticalAlign: ['responsive'], 881 | visibility: ['responsive'], 882 | whitespace: ['responsive'], 883 | width: ['responsive'], 884 | zIndex: ['responsive'], 885 | }, 886 | 887 | 888 | /* 889 | |----------------------------------------------------------------------------- 890 | | Plugins https://tailwindcss.com/docs/plugins 891 | |----------------------------------------------------------------------------- 892 | | 893 | | Here is where you can register any plugins you'd like to use in your 894 | | project. Tailwind's built-in `container` plugin is enabled by default to 895 | | give you a Bootstrap-style responsive container component out of the box. 896 | | 897 | | Be sure to view the complete plugin documentation to learn more about how 898 | | the plugin system works. 899 | | 900 | */ 901 | 902 | plugins: [ 903 | require('tailwindcss/plugins/container')({ 904 | // center: true, 905 | // padding: '1rem', 906 | }), 907 | ], 908 | 909 | 910 | /* 911 | |----------------------------------------------------------------------------- 912 | | Advanced Options https://tailwindcss.com/docs/configuration#options 913 | |----------------------------------------------------------------------------- 914 | | 915 | | Here is where you can tweak advanced configuration options. We recommend 916 | | leaving these options alone unless you absolutely need to change them. 917 | | 918 | */ 919 | 920 | options: { 921 | prefix: 'tsg-', 922 | important: false, 923 | separator: ':', 924 | }, 925 | 926 | } 927 | -------------------------------------------------------------------------------- /tsg-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garygreen/tsg/931f6d208a0868b3976f565b9362c6072c54ad4c/tsg-screenshot.png -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 4 | var fs = require('fs'); 5 | 6 | var env = (process.env.NODE_ENV || '').trim(' '); 7 | var prod = env == 'production'; 8 | 9 | function noop() { 10 | return { 11 | apply: function () {} 12 | } 13 | } 14 | 15 | module.exports = { 16 | 17 | entry: { 18 | site: [ 19 | './src/main.js' 20 | ] 21 | }, 22 | 23 | output: { 24 | path: path.resolve(__dirname, './dist'), 25 | filename: '[name].js', 26 | }, 27 | 28 | devtool: prod ? '' : 'eval', 29 | 30 | // watch: env == 'watch', 31 | 32 | module: { 33 | rules: [{ 34 | test: /\.css$/, 35 | use: [{ 36 | loader: "style-loader" 37 | }, 38 | { 39 | loader: "css-loader" 40 | } 41 | ] 42 | }, 43 | { 44 | test: /\.vue$/, 45 | exclude: /node_modules/, 46 | use: 'vue-loader' 47 | } 48 | ] 49 | }, 50 | 51 | plugins: [ 52 | new webpack.DefinePlugin({ 53 | 'process.env': { 54 | NODE_ENV: JSON.stringify(prod ? 'production' : 'development') 55 | } 56 | }), 57 | { 58 | apply: function() { 59 | // Who needs the HTML Wepack plugin? Yolo. 60 | fs.createReadStream(path.resolve(__dirname, 'src/index.html')).pipe(fs.createWriteStream(path.resolve(__dirname, 'dist/index.html'))); 61 | } 62 | }, 63 | prod ? new UglifyJsPlugin({ 64 | cache: true 65 | }) : new noop 66 | ] 67 | 68 | }; --------------------------------------------------------------------------------

Tailwind Style Guide

Background Colours

Borders Colours

Border Radius

Border Sizes

Font Weights

Heights

Leadings

Margins

Opacities

Other Widths

Paddings

Widths

Percentage Based

Shadows

Text Colours

Text Sizes

Trackings