├── 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 | <template>
2 |   <ul class="list-reset">
3 |     <slot/>
4 |   </ul>
5 | </template>
6 | 
7 | <script>
8 | export default {}
9 | </script>


--------------------------------------------------------------------------------
/components/SubHeadline.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <p class="max-w-md text-lg text-indigo-darker">
3 |     <slot/>
4 |   </p>
5 | </template>
6 | 
7 | <script>
8 | export default {}
9 | </script>


--------------------------------------------------------------------------------
/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 | <template>
2 |   <span class="font-mono bg-purple-lighter text-xs py-1 px-2 rounded mb-1 inline-block">
3 |     <slot/>
4 |   </span>
5 | </template>
6 | 
7 | <script>
8 | export default {}
9 | </script>


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div class="mt-12 mb-8">
 3 |     <h2 class="text-4xl font-black text-grey-darkest leading-tight">
 4 |       <slot></slot>
 5 |     </h2>
 6 |     <hr class="w-8 h-2 ml-0 bg-green">
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {}
12 | </script>


--------------------------------------------------------------------------------
/pages/components/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <Headline>Components</Headline>
4 |     <SubHeadline>
5 |       This is the page where we could show our list of UI components, document their syntax, properties, etc. 🎉
6 |     </SubHeadline>
7 |     <!-- <ComponentsList/> 🌈 --> 
8 |   </div>
9 | </template>


--------------------------------------------------------------------------------
/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 | <template>
2 |   <div>
3 |     <Headline>Welcome!</Headline>
4 |     <SubHeadline>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tenetur aperiam delectus distinctio numquam ducimus qui! Ipsum, non culpa beatae praesentium cum saepe tempora ex, doloremque officia exercitationem corrupti commodi?</SubHeadline>
5 |   </div>
6 | </template>


--------------------------------------------------------------------------------
/components/navigation/NavLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="border-b border-indigo hover:bg-indigo">
 3 |     <nuxt-link class="py-4 px-6 text-white font-semibold no-underline block hover:cursor-pointer" :to="to">
 4 |       <slot/>
 5 |     </nuxt-link>
 6 |   </li>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     to: String
13 |   }
14 | }
15 | </script>


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div class="h-screen leading-normal font-sans bg-blue-lightest flex">
 3 |     <div class="w-64 bg-indigo-dark">
 4 |       <Navigation/>
 5 |     </div>
 6 | 
 7 |     <div class="w-screen max-h-full overflow-y-scroll">
 8 |       <div class="max-w-xl pl-16">
 9 |         <nuxt/>
10 |       </div>
11 |     </div>
12 |     
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import Navigation from '@/components/navigation'
18 | 
19 | export default {
20 |   components: {
21 |     Navigation
22 |   }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/components/navigation/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavLinksList>
 3 |     <NavLink to="/">Welcome</NavLink>
 4 |     <NavLink to="/design-tokens">Design Tokens</NavLink>
 5 |     <NavLink to="/components">Components</NavLink>
 6 |     <NavLink to="/api-demo">API Demo</NavLink>
 7 |   </NavLinksList>
 8 | </template>
 9 | 
10 | <script>
11 | import NavLinksList from '@/components/navigation/NavLinksList'
12 | import NavLink from '@/components/navigation/NavLink'
13 | 
14 | export default {
15 |   components: {
16 |     NavLinksList,
17 |     NavLink
18 |   }
19 | }
20 | </script>
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 <simon@simonswiss.com>",
 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 | <template>
 2 |   <div>
 3 |     <Headline>API demo</Headline>
 4 |     <p class="max-w-md text-lg text-indigo-darker">
 5 |       This page is a demo of how content can be fetched from an API and stored into the "data" object in our page Vue instance. The following data comes from the JSON Placeholder API, using the <a href="https://jsonplaceholder.typicode.com/users">users</a> endpoint.
 6 |     </p>
 7 | 
 8 |     <div class="flex flex-wrap my-8">
 9 |       <div v-for="user in users" :key="user.id">
10 |         <div class="w-64 bg-white px-8 py-4 mr-4 mb-4 shadow rounded">
11 |           <h2 class="text-base text-indigo-dark">{{ user.name }}</h2>
12 |           <p class="text-sm text-grey-dark">{{ user.company.name }}</p>
13 |           <hr class="border-t border-grey-lighter mt-2 mb-2">
14 |           <p class="mb-1"><a href="#" class="lowercase text-sm text-indigo border-b border-sm no-underline border-indigo-lighter">{{ user.email }}</a></p>
15 |           <p class="text-sm text-indigo">&rarr; <a href="#" class="text-sm text-indigo lowercase border-b border-sm no-underline border-indigo-lighter">{{ user.website }}</a></p>
16 |         </div>
17 |         
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import axios from 'axios'
25 | import Headline from '@/components/Headline'
26 | 
27 | export default {
28 |   components: {
29 |     Headline
30 |   },
31 |   asyncData() {
32 |     return axios
33 |       .get('https://jsonplaceholder.typicode.com/users')
34 |       .then(response => {
35 |         return {
36 |           users: response.data
37 |         }
38 |       })
39 |       .catch(error => console.log('error', error))
40 |     return {
41 |       hello: 'world'
42 |     }
43 |   }
44 | }
45 | </script>


--------------------------------------------------------------------------------
/pages/design-tokens/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Headline>Colors</Headline>
 4 |       <div class="flex flex-wrap">
 5 |         <template v-for="(value, key) in designSystem.colors">
 6 |           <div 
 7 |             :key="`color-${key}`" 
 8 |             class="mr-4 mb-4 w-32">
 9 |             <div :class="`shadow w-100 h-32 rounded-lg mb-2 bg-${key}`"></div>
10 |             <p class="font-bold text-xs tracking-wide uppercase text-grey-darker">{{ key }}</p>
11 |           </div>
12 |         </template>
13 |       </div>
14 | 
15 |       <Headline>Font sizes</Headline>
16 |       <div 
17 |         v-for="(value, key) in designSystem.textSizes" 
18 |         :key="`fontsize-${key}`"> 
19 |         <Badge>
20 |           {{ `.text-${key} (${value})` }}
21 |         </Badge>
22 |         <p :class="`mb-6 leading-tight text-${key}`">
23 |           The quick brown fox jumps over the lazy dog
24 |         </p>
25 |       </div>
26 | 
27 |       <Headline>Font weights</Headline>
28 |       <div 
29 |         v-for="(value, key) in designSystem.fontWeights" 
30 |         :key="`fontweight-${key}`">
31 |         <Badge>
32 |           {{ `.font-${key} (${value})` }}
33 |         </Badge>
34 |         <p :class="`font-mono mb-4 text-xl font-${key}`">
35 |           The quick brown fox jumps over the lazy dog
36 |         </p>
37 |       </div>
38 | 
39 |       <Headline>Line heights</Headline>
40 |       <div 
41 |         v-for="(value, key) in designSystem.leading" 
42 |         :key="`lineheight-${key}`" 
43 |         class="w-1/3 inline-block align-top mr-8 mb-4">
44 |         <Badge>
45 |           {{ `.leading-${key} (${value})` }}
46 |         </Badge>
47 |         <p :class="`mt-2 mb-4 leading-${key}`">
48 |           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, itaque? Modi voluptate eveniet consequatur recusandae sed ex quam earum et animi soluta asperiores magni doloremque, natus, doloribus delectus eaque repellendus!
49 |         </p>
50 |       </div>
51 |   </div>
52 | </template>
53 | 
54 | <script>
55 | import TailwindConfig from '@/tailwind.config'
56 | import Badge from '@/components/Badge'
57 | 
58 | export default {
59 |   head: {
60 |     title: 'Design Tokens',
61 |     meta: [
62 |       {
63 |         hid: 'description',
64 |         name: 'description',
65 |         content:
66 |           'This page shows the different design tokens used in our design system. Colors, type scale, spacing scale. The good stuff!'
67 |       }
68 |     ]
69 |   },
70 |   components: {
71 |     Badge
72 |   },
73 |   asyncData() {
74 |     return {
75 |       designSystem: TailwindConfig
76 |     }
77 |   }
78 | }
79 | </script>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------