├── static ├── favicon.ico └── README.md ├── .gitignore ├── assets └── css │ ├── _tailwind-components.css │ ├── _tailwind-utilities.css │ ├── _tailwind-preflight.css │ └── main.css ├── components ├── navigation │ ├── NavLinksList.vue │ ├── NavLink.vue │ └── index.vue ├── SubHeadline.vue ├── Badge.vue └── Headline.vue ├── .prettierrc ├── store ├── application.js └── README.md ├── postcss.config.js ├── plugins ├── components.js └── README.md ├── .editorconfig ├── layouts ├── README.md └── default.vue ├── pages ├── components │ └── index.vue ├── README.md ├── index.vue ├── api-demo │ └── index.vue └── design-tokens │ └── index.vue ├── middleware └── README.md ├── .eslintrc.js ├── README.md ├── package.json ├── nuxt.config.js └── tailwind.config.js /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonswiss/tailwind-styleguide/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /assets/css/_tailwind-components.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This injects any component classes registered by plugins. 3 | */ 4 | 5 | @import 'tailwindcss/components'; 6 | -------------------------------------------------------------------------------- /components/navigation/NavLinksList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /components/SubHeadline.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /assets/css/_tailwind-utilities.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This injects all of Tailwind's utility classes, generated based on your 3 | * config file. 4 | */ 5 | 6 | @import 'tailwindcss/utilities'; 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2, 7 | "trailingComma": "none", 8 | "useTabs": false 9 | } 10 | -------------------------------------------------------------------------------- /store/application.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | count: 0 3 | }) 4 | 5 | export const mutations = { 6 | updateCount(state, amount) { 7 | state.count = state.count + amount 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /components/Badge.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('postcss-url'), 5 | require('tailwindcss')('./tailwind.config.js'), 6 | require('postcss-cssnext') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /plugins/components.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Headline from '../components/Headline' 3 | import SubHeadline from '../components/SubHeadline' 4 | 5 | Vue.component('Headline', Headline) 6 | Vue.component('SubHeadline', SubHeadline) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /components/Headline.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /pages/components/index.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /assets/css/_tailwind-preflight.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 | 9 | @import 'tailwindcss/preflight'; 10 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navigation/NavLink.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | /** ------------------------------------------------------------ 2 | ## TAILWIND CSS 3 | --------------------------------------------------------- */ 4 | 5 | @import '_tailwind-preflight'; 6 | @import '_tailwind-components'; 7 | @import '_tailwind-utilities'; 8 | 9 | /** ------------------------------------------------------------ 10 | ## CUSTOM CLASSES 11 | --------------------------------------------------------- */ 12 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /components/navigation/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: {} 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind Styleguide 2 | 3 | A quick demo to showcase how to import the TailwindCSS config file into the front end and iterate over the options. 4 | 5 | > Nuxt.js project 6 | 7 | ## Build Setup 8 | 9 | ```bash 10 | # install dependencies 11 | $ npm install # Or yarn 12 | 13 | # serve with hot reload at localhost:3000 14 | $ npm run dev 15 | 16 | # build for production and launch server 17 | $ npm run build 18 | $ npm start 19 | 20 | # generate static project 21 | $ npm run generate 22 | ``` 23 | 24 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tailwind", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Simon Vrachliotis ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.18.0", 17 | "graphql-request": "^1.6.0", 18 | "nuxt": "^1.4.0", 19 | "tailwindcss": "^0.5.3" 20 | }, 21 | "devDependencies": { 22 | "babel-eslint": "^8.2.3", 23 | "eslint": "^4.19.1", 24 | "eslint-friendly-formatter": "^4.0.1", 25 | "eslint-loader": "^2.0.0", 26 | "eslint-plugin-vue": "^4.5.0", 27 | "postcss-cssnext": "^3.1.0", 28 | "postcss-import": "^11.1.0", 29 | "postcss-loader": "^2.1.5", 30 | "postcss-url": "^7.3.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | titleTemplate: '%s | Tailwind Styleguide', 7 | htmlAttrs: { 8 | lang: 'en' 9 | }, 10 | meta: [ 11 | { 12 | charset: 'utf-8' 13 | }, 14 | { 15 | name: 'viewport', 16 | content: 'width=device-width, initial-scale=1' 17 | }, 18 | { 19 | hid: 'description', 20 | name: 'description', 21 | content: 'Nuxt.js project' 22 | } 23 | ], 24 | link: [ 25 | { 26 | rel: 'icon', 27 | type: 'image/x-icon', 28 | href: '/favicon.ico' 29 | } 30 | ] 31 | }, 32 | /* 33 | ** Load global CSS 34 | */ 35 | css: ['@/assets/css/main.css'], 36 | /* 37 | ** This option is given directly to the vue-router Router constructor 38 | */ 39 | router: { 40 | base: '', 41 | linkActiveClass: 'is-active' 42 | }, 43 | /* 44 | ** Customize the progress bar color 45 | */ 46 | loading: { 47 | color: '#2bcc83' 48 | }, 49 | 50 | plugins: ['~/plugins/components.js'], 51 | /* 52 | ** Build configuration 53 | */ 54 | build: { 55 | /* 56 | ** Run ESLint on save 57 | */ 58 | extend(config, { isDev, isClient }) { 59 | if (isDev && isClient) { 60 | config.module.rules.push({ 61 | enforce: 'pre', 62 | test: /\.(js|vue)$/, 63 | loader: 'eslint-loader', 64 | exclude: /(node_modules)/ 65 | }) 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /pages/api-demo/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /pages/design-tokens/index.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | -------------------------------------------------------------------------------- /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({ 423 | default: colors['grey-light'] 424 | }, colors), 425 | 426 | 427 | /* 428 | |----------------------------------------------------------------------------- 429 | | Border radius https://tailwindcss.com/docs/border-radius 430 | |----------------------------------------------------------------------------- 431 | | 432 | | Here is where you define your border radius values. If a `default` radius 433 | | is provided, it will be made available as the non-suffixed `.rounded` 434 | | utility. 435 | | 436 | | If your scale includes a `0` value to reset already rounded corners, it's 437 | | a good idea to put it first so other values are able to override it. 438 | | 439 | | Class name: .rounded{-side?}{-size?} 440 | | 441 | */ 442 | 443 | borderRadius: { 444 | 'none': '0', 445 | 'sm': '.125rem', 446 | default: '.25rem', 447 | 'lg': '.5rem', 448 | 'full': '9999px', 449 | }, 450 | 451 | 452 | /* 453 | |----------------------------------------------------------------------------- 454 | | Width https://tailwindcss.com/docs/width 455 | |----------------------------------------------------------------------------- 456 | | 457 | | Here is where you define your width utility sizes. These can be 458 | | percentage based, pixels, rems, or any other units. By default 459 | | we provide a sensible rem based numeric scale, a percentage 460 | | based fraction scale, plus some other common use-cases. You 461 | | can, of course, modify these values as needed. 462 | | 463 | | 464 | | It's also worth mentioning that Tailwind automatically escapes 465 | | invalid CSS class name characters, which allows you to have 466 | | awesome classes like .w-2/3. 467 | | 468 | | Class name: .w-{size} 469 | | 470 | */ 471 | 472 | width: { 473 | 'auto': 'auto', 474 | 'px': '1px', 475 | '1': '0.25rem', 476 | '2': '0.5rem', 477 | '3': '0.75rem', 478 | '4': '1rem', 479 | '6': '1.5rem', 480 | '8': '2rem', 481 | '10': '2.5rem', 482 | '12': '3rem', 483 | '16': '4rem', 484 | '24': '6rem', 485 | '32': '8rem', 486 | '48': '12rem', 487 | '64': '16rem', 488 | '80': '20rem', 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 | '6': '1.5rem', 528 | '8': '2rem', 529 | '10': '2.5rem', 530 | '12': '3rem', 531 | '16': '4rem', 532 | '24': '6rem', 533 | '32': '8rem', 534 | '48': '12rem', 535 | '64': '16rem', 536 | 'full': '100%', 537 | 'screen': '100vh' 538 | }, 539 | 540 | 541 | /* 542 | |----------------------------------------------------------------------------- 543 | | Minimum width https://tailwindcss.com/docs/min-width 544 | |----------------------------------------------------------------------------- 545 | | 546 | | Here is where you define your minimum width utility sizes. These can 547 | | be percentage based, pixels, rems, or any other units. We provide a 548 | | couple common use-cases by default. You can, of course, modify 549 | | these values as needed. 550 | | 551 | | Class name: .min-w-{size} 552 | | 553 | */ 554 | 555 | minWidth: { 556 | '0': '0', 557 | 'full': '100%', 558 | }, 559 | 560 | 561 | /* 562 | |----------------------------------------------------------------------------- 563 | | Minimum height https://tailwindcss.com/docs/min-height 564 | |----------------------------------------------------------------------------- 565 | | 566 | | Here is where you define your minimum height utility sizes. These can 567 | | be percentage based, pixels, rems, or any other units. We provide a 568 | | few common use-cases by default. You can, of course, modify these 569 | | values as needed. 570 | | 571 | | Class name: .min-h-{size} 572 | | 573 | */ 574 | 575 | minHeight: { 576 | '0': '0', 577 | 'full': '100%', 578 | 'screen': '100vh' 579 | }, 580 | 581 | 582 | /* 583 | |----------------------------------------------------------------------------- 584 | | Maximum width https://tailwindcss.com/docs/max-width 585 | |----------------------------------------------------------------------------- 586 | | 587 | | Here is where you define your maximum width utility sizes. These can 588 | | be percentage based, pixels, rems, or any other units. By default 589 | | we provide a sensible rem based scale and a "full width" size, 590 | | which is basically a reset utility. You can, of course, 591 | | modify these values as needed. 592 | | 593 | | Class name: .max-w-{size} 594 | | 595 | */ 596 | 597 | maxWidth: { 598 | 'xs': '20rem', 599 | 'sm': '30rem', 600 | 'md': '40rem', 601 | 'lg': '50rem', 602 | 'xl': '60rem', 603 | '2xl': '70rem', 604 | '3xl': '80rem', 605 | '4xl': '90rem', 606 | '5xl': '100rem', 607 | 'full': '100%', 608 | }, 609 | 610 | 611 | /* 612 | |----------------------------------------------------------------------------- 613 | | Maximum height https://tailwindcss.com/docs/max-height 614 | |----------------------------------------------------------------------------- 615 | | 616 | | Here is where you define your maximum height utility sizes. These can 617 | | be percentage based, pixels, rems, or any other units. We provide a 618 | | couple common use-cases by default. You can, of course, modify 619 | | these values as needed. 620 | | 621 | | Class name: .max-h-{size} 622 | | 623 | */ 624 | 625 | maxHeight: { 626 | 'full': '100%', 627 | 'screen': '100vh', 628 | }, 629 | 630 | 631 | /* 632 | |----------------------------------------------------------------------------- 633 | | Padding https://tailwindcss.com/docs/padding 634 | |----------------------------------------------------------------------------- 635 | | 636 | | Here is where you define your padding utility sizes. These can be 637 | | percentage based, pixels, rems, or any other units. By default we 638 | | provide a sensible rem based numeric scale plus a couple other 639 | | common use-cases like "1px". You can, of course, modify these 640 | | values as needed. 641 | | 642 | | Class name: .p{side?}-{size} 643 | | 644 | */ 645 | 646 | padding: { 647 | 'px': '1px', 648 | '0': '0', 649 | '1': '0.25rem', 650 | '2': '0.5rem', 651 | '3': '0.75rem', 652 | '4': '1rem', 653 | '6': '1.5rem', 654 | '8': '2rem', 655 | '12': '3rem', 656 | '16': '4rem', 657 | '24': '6rem', 658 | '32': '8rem' 659 | }, 660 | 661 | 662 | /* 663 | |----------------------------------------------------------------------------- 664 | | Margin https://tailwindcss.com/docs/margin 665 | |----------------------------------------------------------------------------- 666 | | 667 | | Here is where you define your margin utility sizes. These can be 668 | | percentage based, pixels, rems, or any other units. By default we 669 | | provide a sensible rem based numeric scale plus a couple other 670 | | common use-cases like "1px". You can, of course, modify these 671 | | values as needed. 672 | | 673 | | Class name: .m{side?}-{size} 674 | | 675 | */ 676 | 677 | margin: { 678 | 'auto': 'auto', 679 | 'px': '1px', 680 | '0': '0', 681 | '1': '0.25rem', 682 | '2': '0.5rem', 683 | '3': '0.75rem', 684 | '4': '1rem', 685 | '6': '1.5rem', 686 | '8': '2rem', 687 | '12': '3rem', 688 | '16': '4rem', 689 | '24': '6rem', 690 | '32': '8rem' 691 | }, 692 | 693 | 694 | /* 695 | |----------------------------------------------------------------------------- 696 | | Negative margin https://tailwindcss.com/docs/negative-margin 697 | |----------------------------------------------------------------------------- 698 | | 699 | | Here is where you define your negative margin utility sizes. These can 700 | | be percentage based, pixels, rems, or any other units. By default we 701 | | provide matching values to the padding scale since these utilities 702 | | generally get used together. You can, of course, modify these 703 | | values as needed. 704 | | 705 | | Class name: .-m{side?}-{size} 706 | | 707 | */ 708 | 709 | negativeMargin: { 710 | 'px': '1px', 711 | '0': '0', 712 | '1': '0.25rem', 713 | '2': '0.5rem', 714 | '3': '0.75rem', 715 | '4': '1rem', 716 | '6': '1.5rem', 717 | '8': '2rem', 718 | }, 719 | 720 | 721 | /* 722 | |----------------------------------------------------------------------------- 723 | | Shadows https://tailwindcss.com/docs/shadows 724 | |----------------------------------------------------------------------------- 725 | | 726 | | Here is where you define your shadow utilities. As you can see from 727 | | the defaults we provide, it's possible to apply multiple shadows 728 | | per utility using comma separation. 729 | | 730 | | If a `default` shadow is provided, it will be made available as the non- 731 | | suffixed `.shadow` utility. 732 | | 733 | | Class name: .shadow-{size?} 734 | | 735 | */ 736 | 737 | shadows: { 738 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 739 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 740 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 741 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 742 | 'none': 'none', 743 | }, 744 | 745 | 746 | /* 747 | |----------------------------------------------------------------------------- 748 | | Z-index https://tailwindcss.com/docs/z-index 749 | |----------------------------------------------------------------------------- 750 | | 751 | | Here is where you define your z-index utility values. By default we 752 | | provide a sensible numeric scale. You can, of course, modify these 753 | | values as needed. 754 | | 755 | | Class name: .z-{index} 756 | | 757 | */ 758 | 759 | zIndex: { 760 | 'auto': 'auto', 761 | '0': 0, 762 | '10': 10, 763 | '20': 20, 764 | '30': 30, 765 | '40': 40, 766 | '50': 50, 767 | }, 768 | 769 | 770 | /* 771 | |----------------------------------------------------------------------------- 772 | | Opacity https://tailwindcss.com/docs/opacity 773 | |----------------------------------------------------------------------------- 774 | | 775 | | Here is where you define your opacity utility values. By default we 776 | | provide a sensible numeric scale. You can, of course, modify these 777 | | values as needed. 778 | | 779 | | Class name: .opacity-{name} 780 | | 781 | */ 782 | 783 | opacity: { 784 | '0': '0', 785 | '25': '.25', 786 | '50': '.5', 787 | '75': '.75', 788 | '100': '1', 789 | }, 790 | 791 | 792 | /* 793 | |----------------------------------------------------------------------------- 794 | | SVG fill https://tailwindcss.com/docs/svg 795 | |----------------------------------------------------------------------------- 796 | | 797 | | Here is where you define your SVG fill colors. By default we just provide 798 | | `fill-current` which sets the fill to the current text color. This lets you 799 | | specify a fill color using existing text color utilities and helps keep the 800 | | generated CSS file size down. 801 | | 802 | | Class name: .fill-{name} 803 | | 804 | */ 805 | 806 | svgFill: { 807 | 'current': 'currentColor', 808 | }, 809 | 810 | 811 | /* 812 | |----------------------------------------------------------------------------- 813 | | SVG stroke https://tailwindcss.com/docs/svg 814 | |----------------------------------------------------------------------------- 815 | | 816 | | Here is where you define your SVG stroke colors. By default we just provide 817 | | `stroke-current` which sets the stroke to the current text color. This lets 818 | | you specify a stroke color using existing text color utilities and helps 819 | | keep the generated CSS file size down. 820 | | 821 | | Class name: .stroke-{name} 822 | | 823 | */ 824 | 825 | svgStroke: { 826 | 'current': 'currentColor', 827 | }, 828 | 829 | 830 | /* 831 | |----------------------------------------------------------------------------- 832 | | Modules https://tailwindcss.com/docs/configuration#modules 833 | |----------------------------------------------------------------------------- 834 | | 835 | | Here is where you control which modules are generated and what variants are 836 | | generated for each of those modules. 837 | | 838 | | Currently supported variants: 839 | | - responsive 840 | | - hover 841 | | - focus 842 | | - active 843 | | - group-hover 844 | | 845 | | To disable a module completely, use `false` instead of an array. 846 | | 847 | */ 848 | 849 | modules: { 850 | appearance: ['responsive'], 851 | backgroundAttachment: ['responsive'], 852 | backgroundColors: ['responsive', 'hover'], 853 | backgroundPosition: ['responsive'], 854 | backgroundRepeat: ['responsive'], 855 | backgroundSize: ['responsive'], 856 | borderColors: ['responsive', 'hover'], 857 | borderRadius: ['responsive'], 858 | borderStyle: ['responsive'], 859 | borderWidths: ['responsive'], 860 | cursor: ['responsive', 'hover'], 861 | display: ['responsive'], 862 | flexbox: ['responsive'], 863 | float: ['responsive'], 864 | fonts: ['responsive'], 865 | fontWeights: ['responsive', 'hover'], 866 | height: ['responsive'], 867 | leading: ['responsive'], 868 | lists: ['responsive'], 869 | margin: ['responsive'], 870 | maxHeight: ['responsive'], 871 | maxWidth: ['responsive'], 872 | minHeight: ['responsive'], 873 | minWidth: ['responsive'], 874 | negativeMargin: ['responsive'], 875 | opacity: ['responsive'], 876 | overflow: ['responsive'], 877 | padding: ['responsive'], 878 | pointerEvents: ['responsive'], 879 | position: ['responsive'], 880 | resize: ['responsive'], 881 | shadows: ['responsive'], 882 | svgFill: [], 883 | svgStroke: [], 884 | textAlign: ['responsive'], 885 | textColors: ['responsive', 'hover'], 886 | textSizes: ['responsive'], 887 | textStyle: ['responsive', 'hover'], 888 | tracking: ['responsive'], 889 | userSelect: ['responsive'], 890 | verticalAlign: ['responsive'], 891 | visibility: ['responsive'], 892 | whitespace: ['responsive'], 893 | width: ['responsive'], 894 | zIndex: ['responsive'], 895 | }, 896 | 897 | 898 | /* 899 | |----------------------------------------------------------------------------- 900 | | Plugins https://tailwindcss.com/docs/plugins 901 | |----------------------------------------------------------------------------- 902 | | 903 | | Here is where you can register any plugins you'd like to use in your 904 | | project. Tailwind's built-in `container` plugin is enabled by default to 905 | | give you a Bootstrap-style responsive container component out of the box. 906 | | 907 | | Be sure to view the complete plugin documentation to learn more about how 908 | | the plugin system works. 909 | | 910 | */ 911 | 912 | plugins: [ 913 | require('tailwindcss/plugins/container')({ 914 | // center: true, 915 | // padding: '1rem', 916 | }), 917 | ], 918 | 919 | 920 | /* 921 | |----------------------------------------------------------------------------- 922 | | Advanced Options https://tailwindcss.com/docs/configuration#options 923 | |----------------------------------------------------------------------------- 924 | | 925 | | Here is where you can tweak advanced configuration options. We recommend 926 | | leaving these options alone unless you absolutely need to change them. 927 | | 928 | */ 929 | 930 | options: { 931 | prefix: '', 932 | important: false, 933 | separator: ':', 934 | }, 935 | 936 | } 937 | --------------------------------------------------------------------------------