├── babel.config.js
├── public
    ├── favicon.ico
    ├── img
    │   └── logo.png
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── components
    │   ├── HelloWorld.vue
    │   └── ColorPicker.vue
    └── App.vue
├── .gitignore
├── README.md
├── postcss.config.js
├── package.json
└── tailwind.js


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessarcher/tailwind-color-picker/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessarcher/tailwind-color-picker/HEAD/public/img/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessarcher/tailwind-color-picker/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tailwind-colors
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | yarn run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | yarn run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | 
 3 | const autoprefixer = require("autoprefixer");
 4 | 
 5 | const purgecss = require("@fullhuman/postcss-purgecss");
 6 | 
 7 | class TailwindExtractor {
 8 |   static extract(content) {
 9 |     return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
10 |   }
11 | }
12 | 
13 | module.exports = {
14 | 
15 |     plugins: [
16 | 
17 |         tailwindcss('./tailwind.js'),
18 | 
19 |         autoprefixer({
20 |             add: true,
21 |             grid: true
22 |         }),
23 | 
24 |         //Only add purgecss in production
25 |         process.env.NODE_ENV === 'production' ? purgecss({
26 |             content: [
27 |                 "./src/**/*.html",
28 |                 "./src/**/*.vue",
29 |                 "./public/**/*.html",
30 |             ],
31 |             extractors: [
32 |                 {
33 |                     extractor: TailwindExtractor,
34 |                     extensions: ['html', 'vue']
35 |                 }
36 |             ]
37 |         }) : ''
38 |     ]
39 | };
40 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" prefix="og: http://ogp.me/ns/website#">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Tailwind Color Picker</title>
 9 |     <meta property="og:title" content="Tailwind Color Picker" />
10 |     <meta property="og:description" content="Easily tweak your Tailwind CSS colours" />
11 |     <meta property="og:type" content="website" />
12 |     <meta property="og:url" content="https://tailwind-color-picker.jessarcher.com/" />
13 |     <meta property="og:image" content="https://tailwind-color-picker.jessarcher.com/img/logo.png" />
14 |   </head>
15 |   <body>
16 |     <noscript>
17 |       <strong>We're sorry but Tailwind color Picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
18 |     </noscript>
19 |     <div id="app"></div>
20 |     <!-- built files will be auto injected -->
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwind-color-picker",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.6.11"
12 |   },
13 |   "devDependencies": {
14 |     "@fullhuman/postcss-purgecss": "^1.3.0",
15 |     "@vue/cli-plugin-babel": "^4.1.2",
16 |     "@vue/cli-plugin-eslint": "^4.1.2",
17 |     "@vue/cli-service": "^4.1.2",
18 |     "babel-eslint": "^10.0.3",
19 |     "eslint": "^6.8.0",
20 |     "eslint-plugin-vue": "^6.1.2",
21 |     "tailwindcss": "^0.7.4",
22 |     "vue-color": "^2.7.0",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "rules": {},
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     }
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not ie <= 8"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex">
  3 |         <!-- <input :value="name" @input="$emit('update:name', $event.target.value); $emit('input')" class="flex-1 border rounded py-2 px-3 mr-4 my-2 text-grey-darkest bg-grey-lightest focus:bg-white"> -->
  4 |         <div class="flex-1 text-purple p-5 font-mono">.{{ name }}</div>
  5 |         <!-- <input type="color" :value="color" @input="$emit('update:color', $event.target.value); $emit('input')" class="flex-1"> -->
  6 |         <div class="flex-1">
  7 |             <div v-if="color === 'transparent'" class="cursor-not-allowed flex w-full h-full items-center justify-center border text-grey-dark">transparent</div>
  8 |             <div v-else class="w-full h-full">
  9 |                 <button type="button" @click="showPicker = true" class="w-full h-full" :style="'background-color:' + color"></button>
 10 |                 <div v-if="showPicker" class="fixed pin z-50 flex items-center justify-center" @click="showPicker = false">
 11 |                     <div class="relative text-right" @click.stop>
 12 |                         <button
 13 |                             type="button"
 14 |                             class="bg-white rounded-t-lg border py-1 px-2 text-sm shadow-lg"
 15 |                             @click="showPicker = false"
 16 |                         >&times; close</button>
 17 |                         <chrome-picker
 18 |                             :value="color"
 19 |                             @input="updateColor"
 20 |                         ></chrome-picker>
 21 |                     </div>
 22 |                 </div>
 23 |             </div>
 24 |         </div>
 25 |         <button type="button" v-if="showPicker" @click="showPicker = false" class="block fixed pin w-full h-full z-40 cursor-default"></button>
 26 |     </div>
 27 | </template>
 28 | 
 29 | <script>
 30 |     import { Chrome } from 'vue-color'
 31 | 
 32 | 
 33 |     export default {
 34 |         components: {
 35 |             ChromePicker: Chrome,
 36 |         },
 37 | 
 38 |         props: {
 39 |             name: {
 40 |                 required: true,
 41 |             },
 42 | 
 43 |             color: {
 44 |                 required: true,
 45 |             },
 46 |         },
 47 | 
 48 |         data() {
 49 |             return {
 50 |                 showPicker: false,
 51 |             }
 52 |         },
 53 | 
 54 |         computed: {
 55 |             inputFormat: function() {
 56 |                 if (this.color.match(/^hsla.*/) !== null) {
 57 |                     return 'hsla'
 58 |                 }
 59 | 
 60 |                 if (this.color.match(/^hsl.*/) !== null) {
 61 |                     return 'hsl'
 62 |                 }
 63 | 
 64 |                 if (this.color.match(/^rgba.*/) !== null) {
 65 |                     return 'rgba'
 66 |                 }
 67 | 
 68 |                 if (this.color.match(/^rgb.*/) !== null) {
 69 |                     return 'rgb'
 70 |                 }
 71 | 
 72 |                 return 'hex';
 73 |             },
 74 |         },
 75 | 
 76 |         methods: {
 77 |             updateColor (color) {
 78 |                 if (color.a !== 1 || this.inputFormat === 'hsla' || this.inputFormat === 'rgba') {
 79 |                     if (this.inputFormat === 'rgb' || this.inputFormat === 'rgba') {
 80 |                         this.$emit('update:color', this.rgba(color))
 81 |                         this.$emit('input')
 82 |                         return;
 83 |                     }
 84 |                     this.$emit('update:color', this.hsla(color))
 85 |                     this.$emit('input')
 86 |                     return;
 87 |                 }
 88 | 
 89 |                 if (this.inputFormat === 'hsl') {
 90 |                     this.$emit('update:color', this.hsl(color))
 91 |                     this.$emit('input')
 92 |                     return;
 93 |                 }
 94 | 
 95 |                 if (this.inputFormat === 'rgb') {
 96 |                     this.$emit('update:color', this.rgb(color))
 97 |                     this.$emit('input')
 98 |                     return;
 99 |                 }
100 | 
101 |                 this.$emit('update:color', color.hex.toLowerCase())
102 |                 this.$emit('input')
103 |             },
104 | 
105 |             hsla (color) {
106 |                 let h = Math.round(color.hsl.h)
107 |                 let s = Math.round(color.hsl.s * 100)
108 |                 let l = Math.round(color.hsl.l * 100)
109 |                 let a = color.hsl.a.toPrecision(2).replace(/0+$/, '').replace(/\.$/, '')
110 | 
111 |                 return `hsla(${h}, ${s}%, ${l}%, ${a})`
112 |             },
113 | 
114 |             hsl (color) {
115 |                 let h = Math.round(color.hsl.h)
116 |                 let s = Math.round(color.hsl.s * 100)
117 |                 let l = Math.round(color.hsl.l * 100)
118 | 
119 |                 return `hsl(${h}, ${s}%, ${l}%)`
120 |             },
121 | 
122 |             rgba (color) {
123 |                 let r = color.rgba.r
124 |                 let g = color.rgba.g
125 |                 let b = color.rgba.b
126 |                 let a = color.rgba.a.toPrecision(2).replace(/0+$/, '').replace(/\.$/, '')
127 | 
128 |                 return `rgba(${r}, ${g}, ${b}, ${a})`
129 |             },
130 | 
131 |             rgb (color) {
132 |                 let r = color.rgba.r
133 |                 let g = color.rgba.g
134 |                 let b = color.rgba.b
135 | 
136 |                 return `rgb(${r}, ${g}, ${b})`
137 |             },
138 |         }
139 |     }
140 | </script>
141 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex flex-col min-h-screen max-h-screen font-sans leading-normal text-grey-darkest bg-grey-lightest p-4">
  3 |         <header class="flex justify-between items-center">
  4 |             <h1 class="text-3xl text-teal-dark inline-flex items-center">
  5 |                 <svg version="1.1" class="w-16 h-16 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><defs><linearGradient id="a" x1="11.797" x2="29.563" y1="3.4576" y2="19.873" gradientUnits="userSpaceOnUse"><stop stop-color="#ae2323" offset="0"/><stop stop-color="#b5ae31" offset=".19492"/><stop stop-color="#42bf45" offset=".38583"/><stop stop-color="#52c5c8" offset=".59914"/><stop stop-color="#6b63d1" offset=".79855"/><stop stop-color="#d76dd4" offset="1"/></linearGradient></defs><path transform="translate(4 12)" d="M10 8c1.333-5.333 4.667-8 10-8 8 0 9 6 13 7 2.667.667 5-.333 7-3-1.333 5.333-4.667 8-10 8-8 0-9-6-13-7-2.667-.667-5 .333-7 3zM0 20c1.333-5.333 4.667-8 10-8 8 0 9 6 13 7 2.667.667 5-.333 7-3-1.333 5.333-4.667 8-10 8-8 0-9-6-13-7-2.667-.667-5 .333-7 3z" fill="url(#a)"/></svg>
  6 |                 Tailwind Color Picker
  7 |             </h1>
  8 |             <div>
  9 |                 <p class="text-grey-dark mb-2">By <a class="text-grey-darker font-bold no-underline hover:text-grey-darkest" href="https://twitter.com/jessarchercodes">@jessarchercodes</a></p>
 10 |                 <a href="https://github.com/jessarcher/tailwind-color-picker"><img alt="star this repo" src="https://githubbadges.com/star.svg?user=jessarcher&repo=tailwind-color-picker&style=default"/></a>
 11 |                 <a href="https://github.com/jessarcher/tailwind-color-picker/fork"><img alt="fork this repo" src="https://githubbadges.com/fork.svg?user=jessarcher&repo=tailwind-color-picker&style=default" class="ml-2" /></a>
 12 |             </div>
 13 |         </header>
 14 |         <main class="flex-grow flex mt-4">
 15 |             <div class="flex-1 flex flex-col mr-2">
 16 |                 <div class="flex justify-between items-baseline">
 17 |                     <h2 class="text-sm uppercase tracking-wide mb-2 text-grey-dark">Paste Your Config</h2>
 18 |                     <div class="text-sm text-grey-dark mr-2">Tailwind Version: <code>{{ tailwindVersion }}</code></div>
 19 |                 </div>
 20 |                 <div class="flex-1 relative">
 21 |                     <textarea class="leading-normal text-black border rounded p-4 w-full h-full font-mono" v-model="colorDefinition"></textarea>
 22 |                 </div>
 23 |             </div>
 24 |             <div class="flex-1 flex flex-col ml-2">
 25 |                 <h2 class="text-sm uppercase tracking-wide mb-2 text-grey-dark">Tweak Your Colors</h2>
 26 |                 <div class="flex-1 relative">
 27 |                     <div class="absolute pin overflow-y-scroll border rounded bg-white">
 28 |                         <color-picker v-for="color in colorsFlat" :key="color.name" :name.sync="color.name" :color.sync="color.code" @input="dump"></color-picker>
 29 |                     </div>
 30 |                 </div>
 31 |             </div>
 32 |         </main>
 33 |         <footer class="mt-4 text-center text-sm text-grey-dark">
 34 |             Made with love for <a class="text-grey-darker font-bold no-underline hover:text-grey-darkest" href="https://tailwindcss.com/">Tailwind CSS</a>.
 35 |             Hosted with <a class="text-grey-darker font-bold no-underline hover:text-grey-darkest" href="https://netlify.com/">Netlify</a>
 36 |         </footer>
 37 |     </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import ColorPicker from './components/ColorPicker'
 42 | 
 43 | export default {
 44 |     name: 'app',
 45 | 
 46 |     components: {
 47 |         ColorPicker
 48 |     },
 49 | 
 50 |     data() {
 51 |         return {
 52 |             tailwindVersion: null,
 53 |             colorDefinition: `    colors: {
 54 |       transparent: 'transparent',
 55 |       black: '#000',
 56 |       white: '#fff',
 57 |       gray: {
 58 |         100: '#f7fafc',
 59 |         200: '#edf2f7',
 60 |         300: '#e2e8f0',
 61 |         400: '#cbd5e0',
 62 |         500: '#a0aec0',
 63 |         600: '#718096',
 64 |         700: '#4a5568',
 65 |         800: '#2d3748',
 66 |         900: '#1a202c',
 67 |       },
 68 |       red: {
 69 |         100: '#fff5f5',
 70 |         200: '#fed7d7',
 71 |         300: '#feb2b2',
 72 |         400: '#fc8181',
 73 |         500: '#f56565',
 74 |         600: '#e53e3e',
 75 |         700: '#c53030',
 76 |         800: '#9b2c2c',
 77 |         900: '#742a2a',
 78 |       },
 79 |       orange: {
 80 |         100: '#fffaf0',
 81 |         200: '#feebc8',
 82 |         300: '#fbd38d',
 83 |         400: '#f6ad55',
 84 |         500: '#ed8936',
 85 |         600: '#dd6b20',
 86 |         700: '#c05621',
 87 |         800: '#9c4221',
 88 |         900: '#7b341e',
 89 |       },
 90 |       yellow: {
 91 |         100: '#fffff0',
 92 |         200: '#fefcbf',
 93 |         300: '#faf089',
 94 |         400: '#f6e05e',
 95 |         500: '#ecc94b',
 96 |         600: '#d69e2e',
 97 |         700: '#b7791f',
 98 |         800: '#975a16',
 99 |         900: '#744210',
100 |       },
101 |       green: {
102 |         100: '#f0fff4',
103 |         200: '#c6f6d5',
104 |         300: '#9ae6b4',
105 |         400: '#68d391',
106 |         500: '#48bb78',
107 |         600: '#38a169',
108 |         700: '#2f855a',
109 |         800: '#276749',
110 |         900: '#22543d',
111 |       },
112 |       teal: {
113 |         100: '#e6fffa',
114 |         200: '#b2f5ea',
115 |         300: '#81e6d9',
116 |         400: '#4fd1c5',
117 |         500: '#38b2ac',
118 |         600: '#319795',
119 |         700: '#2c7a7b',
120 |         800: '#285e61',
121 |         900: '#234e52',
122 |       },
123 |       blue: {
124 |         100: '#ebf8ff',
125 |         200: '#bee3f8',
126 |         300: '#90cdf4',
127 |         400: '#63b3ed',
128 |         500: '#4299e1',
129 |         600: '#3182ce',
130 |         700: '#2b6cb0',
131 |         800: '#2c5282',
132 |         900: '#2a4365',
133 |       },
134 |       indigo: {
135 |         100: '#ebf4ff',
136 |         200: '#c3dafe',
137 |         300: '#a3bffa',
138 |         400: '#7f9cf5',
139 |         500: '#667eea',
140 |         600: '#5a67d8',
141 |         700: '#4c51bf',
142 |         800: '#434190',
143 |         900: '#3c366b',
144 |       },
145 |       purple: {
146 |         100: '#faf5ff',
147 |         200: '#e9d8fd',
148 |         300: '#d6bcfa',
149 |         400: '#b794f4',
150 |         500: '#9f7aea',
151 |         600: '#805ad5',
152 |         700: '#6b46c1',
153 |         800: '#553c9a',
154 |         900: '#44337a',
155 |       },
156 |       pink: {
157 |         100: '#fff5f7',
158 |         200: '#fed7e2',
159 |         300: '#fbb6ce',
160 |         400: '#f687b3',
161 |         500: '#ed64a6',
162 |         600: '#d53f8c',
163 |         700: '#b83280',
164 |         800: '#97266d',
165 |         900: '#702459',
166 |       },
167 |     },
168 | `,
169 |             colors: [],
170 |             indentation: '  ',
171 |         }
172 |     },
173 | 
174 |     computed: {
175 |         colorsFlat() {
176 |             let colorsFlat = [];
177 | 
178 |             this.colors.forEach(color => {
179 |                 if (typeof color.variations === 'object') {
180 |                     color.variations.forEach(variation => {
181 |                         colorsFlat.push(variation)
182 |                     });
183 |                 } else {
184 |                     colorsFlat.push(color)
185 |                 }
186 |             })
187 | 
188 |             return colorsFlat
189 |         },
190 |     },
191 | 
192 |     watch: {
193 |         colorDefinition: function () {
194 |             this.load();
195 |         }
196 |     },
197 | 
198 |     methods: {
199 |         load() {
200 |             if (/^\s*let colors = {/.test(this.colorDefinition)) {
201 |                 this.tailwindVersion = 0.7
202 |                 this.loadv07()
203 |                 return
204 |             }
205 | 
206 |             if (/^\s*colors: {/.test(this.colorDefinition)) {
207 |                 this.tailwindVersion = 1
208 |                 this.loadv1()
209 |                 return
210 |             }
211 | 
212 |             this.tailwindVersion = 'unknown'
213 |         },
214 | 
215 |         loadv07() {
216 |             let colors = Function(this.colorDefinition + '; return colors')();
217 | 
218 |             this.colors = [];
219 | 
220 |             for (let color in colors) {
221 |                 this.colors.push({
222 |                     name: color,
223 |                     code: colors[color],
224 |                 });
225 |             }
226 |         },
227 | 
228 |         loadv1() {
229 |             let colors = Function('let theme = {' + this.colorDefinition + '}; return theme.colors')();
230 | 
231 |             this.colors = [];
232 | 
233 |             for (let color in colors) {
234 |                 if (typeof colors[color] === 'object') {
235 |                     let colorWithVariations = {
236 |                         name: color,
237 |                         variations: [],
238 |                     }
239 | 
240 |                     for (let variation in colors[color]) {
241 |                         colorWithVariations.variations.push({
242 |                             name: color + '-' + variation,
243 |                             variation: variation,
244 |                             code: colors[color][variation]
245 |                         })
246 |                     }
247 | 
248 |                     this.colors.push(colorWithVariations)
249 |                 } else {
250 |                     this.colors.push({
251 |                         name: color,
252 |                         code: colors[color],
253 |                     });
254 |                 }
255 |             }
256 |         },
257 | 
258 |         dump() {
259 |             if (this.tailwindVersion === 0.7) {
260 |                 return this.dumpv07();
261 |             }
262 | 
263 |             if (this.tailwindVersion === 1) {
264 |                 return this.dumpv1();
265 |             }
266 |         },
267 | 
268 |         dumpv07() {
269 |             this.colorDefinition = "let colors = {\n";
270 |             this.colors.forEach(color => {
271 |                 this.colorDefinition += this.indentation
272 |                 this.colorDefinition += `'${color.name}': '${color.code}',`
273 |                 this.colorDefinition += "\n";
274 |             })
275 |             this.colorDefinition += "}";
276 |         },
277 | 
278 |         dumpv1() {
279 |             this.colorDefinition = this.indentation + this.indentation + "colors: {\n";
280 |             this.colors.forEach(color => {
281 |                 if (typeof color.variations === 'object') {
282 |                     this.colorDefinition += this.indentation + this.indentation + this.indentation
283 |                     this.colorDefinition += `${this.wrapPropertyName(color.name)}: {`
284 |                     this.colorDefinition += "\n";
285 |                     color.variations.forEach(variation => {
286 |                         this.colorDefinition += this.indentation + this.indentation + this.indentation + this.indentation
287 |                         this.colorDefinition += `${this.wrapPropertyName(variation.variation)}: '${variation.code}',`
288 |                         this.colorDefinition += "\n";
289 |                     })
290 |                     this.colorDefinition += this.indentation + this.indentation + this.indentation + "},\n";
291 |                 } else {
292 |                     this.colorDefinition += this.indentation + this.indentation + this.indentation
293 |                     this.colorDefinition += `${this.wrapPropertyName(color.name)}: '${color.code}',`
294 |                     this.colorDefinition += "\n";
295 |                 }
296 |             })
297 |             this.colorDefinition += this.indentation + this.indentation;
298 |             this.colorDefinition += "},";
299 |         },
300 | 
301 |         wrapPropertyName(propertyName) {
302 |             return /^[a-zA-Z0-9_]*$/.test(propertyName) ? propertyName : `'${propertyName}'`
303 |         },
304 |     },
305 | 
306 |     mounted() {
307 |         this.load();
308 |     }
309 | }
310 | </script>
311 | 
312 | <style>
313 | @tailwind preflight;
314 | @tailwind components;
315 | @tailwind utilities;
316 | </style>
317 | 


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


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