├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── assets
    ├── README.md
    └── css
    │   ├── common-styles.css
    │   └── tailwind.css
├── components
    ├── ChartActivity.vue
    ├── ChartBlock.vue
    ├── ChartObjective.vue
    ├── ChartResult.vue
    ├── Logo.vue
    ├── Page.vue
    ├── README.md
    ├── StyleSection.vue
    ├── icons
    │   ├── Arrow.vue
    │   ├── Bone.vue
    │   └── Charts.vue
    ├── partials
    │   └── Sidebar.vue
    └── styleguide
    │   ├── Colors.vue
    │   ├── Fonts.vue
    │   ├── Gradients.vue
    │   └── Icons.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    └── _slug.vue
├── plugins
    ├── README.md
    ├── components.js
    └── vue-apex-charts.js
├── static
    ├── README.md
    ├── favicon.ico
    └── icon.png
├── store
    └── README.md
├── tailwind.config.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 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 | 


--------------------------------------------------------------------------------
/.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 |     '@nuxtjs',
12 |     'prettier',
13 |     'plugin:prettier/recommended',
14 |     'plugin:nuxt/recommended'
15 |   ],
16 |   plugins: [
17 |     'prettier'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {
21 |     'nuxt/no-cjs-in-config': 'off'
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "arrowParens": "always",
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Alba Silvente Fuentes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cabbage
 2 | 
 3 | > Cabbage is a dashboard to measure the progress of your health goals.
 4 | 
 5 | Demo site of the article series **Create a dashboard with TailwindCSS**.
 6 | Follow the articles below to know more about how this dashboard was created. To make it work create your own [Storyblok](https://www.storyblok.com/) Space and add your API token in a .env file under the API_KEY variable.
 7 | 
 8 | ### ✍ Articles
 9 | 
10 | - [Create a dashboard with TailwindCSS - Part 1](https://www.dawntraoz.com/blog/create-a-dashboard-with-tailwindcss-part-1)
11 | - [Create a dashboard with TailwindCSS - Part 2](https://www.dawntraoz.com/blog/create-a-dashboard-with-tailwindcss-part-2)
12 | - [Create a dashboard with TailwindCSS - Adding Storyblok](https://www.dawntraoz.com/blog/create-a-dashboard-with-tailwindcss-adding-storyblok)
13 | - [Create a dashboard with TailwindCSS - Part 3](https://www.dawntraoz.com/blog/create-a-dashboard-with-tailwindcss-part-3)
14 | 
15 | ## Build Setup
16 | 
17 | ```bash
18 | # install dependencies
19 | $ npm install
20 | 
21 | # serve with hot reload at localhost:3000
22 | $ npm run dev
23 | 
24 | # build for production and launch server
25 | $ npm run build
26 | $ npm run start
27 | 
28 | # generate static project
29 | $ npm run generate
30 | ```
31 | 
32 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
33 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/assets/css/common-styles.css:
--------------------------------------------------------------------------------
 1 | /* Common Styles */
 2 | html,
 3 | body { @apply overflow-x-hidden; }
 4 | body {
 5 |     @apply font-normal text-base text-gray-900 overflow-x-hidden;
 6 | }
 7 | 
 8 | /* - Headings */
 9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6 { @apply font-semibold; }
15 | 
16 | h1 {
17 |     @apply text-3xl leading-tight;
18 | }
19 | h2 {
20 |     @apply text-2xl leading-tight;
21 | }
22 | @screen md {
23 |     h1 { @apply text-4xl; }
24 |     h2 { @apply text-3xl; }
25 | }
26 | h3 {
27 |     @apply text-2xl;
28 | }
29 | h4 {
30 |     @apply text-xl;
31 | }
32 | h5 {
33 |     @apply text-lg;
34 | }
35 | h6 {
36 |     @apply text-base;
37 | }
38 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap');
 2 | 
 3 | /* purgecss start ignore */
 4 | @import 'tailwindcss/base';
 5 | @import 'tailwindcss/components';
 6 | /* purgecss end ignore */
 7 | @import 'tailwindcss/utilities';
 8 | @import 'tailwindcss/screens';
 9 | 
10 | @import './common-styles.css';


--------------------------------------------------------------------------------
/components/ChartActivity.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <client-only>
  3 |     <VueApexCharts
  4 |       height="350"
  5 |       type="bar"
  6 |       class="-ml-4 md:ml-auto"
  7 |       :options="chartOptions"
  8 |       :series="series"
  9 |     />
 10 |   </client-only>
 11 | </template>
 12 | 
 13 | <script>
 14 | export default {
 15 |   props: ['blok'],
 16 |   data: () => {
 17 |     return {
 18 |       series: [],
 19 |       chartOptions: {
 20 |         chart: {
 21 |           type: 'bar',
 22 |           height: 350
 23 |         },
 24 |         colors: ['#f06988', '#4fba98'],
 25 |         plotOptions: {
 26 |           bar: {
 27 |             horizontal: false,
 28 |             columnWidth: '50%',
 29 |             endingShape: 'rounded'
 30 |           }
 31 |         },
 32 |         dataLabels: {
 33 |           enabled: false
 34 |         },
 35 |         stroke: {
 36 |           show: true,
 37 |           width: 2,
 38 |           colors: ['transparent']
 39 |         },
 40 |         fill: {
 41 |           opacity: 1
 42 |         },
 43 |         legend: {
 44 |           onItemClick: {
 45 |             toggleDataSeries: false
 46 |           }
 47 |         },
 48 |         tooltip: {
 49 |           y: {
 50 |             formatter: (value) => value + ' steps'
 51 |           }
 52 |         },
 53 |         responsive: [
 54 |           {
 55 |             breakpoint: 1000,
 56 |             options: {
 57 |               chart: {
 58 |                 height: 250
 59 |               },
 60 |               plotOptions: {
 61 |                 bar: {
 62 |                   columnWidth: '100%'
 63 |                 }
 64 |               }
 65 |             }
 66 |           }
 67 |         ]
 68 |       }
 69 |     }
 70 |   },
 71 |   mounted() {
 72 |     this.series = [
 73 |       {
 74 |         name: 'Past month',
 75 |         type: 'bar',
 76 |         data: this.dataMonth()
 77 |       },
 78 |       {
 79 |         name: 'This month',
 80 |         type: 'bar',
 81 |         data: this.dataMonth()
 82 |       }
 83 |     ]
 84 |   },
 85 |   methods: {
 86 |     dataMonth() {
 87 |       const data = []
 88 |       for (let i = -14; i <= 0; i++) {
 89 |         data.push({
 90 |           x: this.$moment()
 91 |             .add(i, 'days')
 92 |             .format('Do MMM'),
 93 |           y: Math.floor(Math.random() * 5000)
 94 |         })
 95 |       }
 96 | 
 97 |       return data
 98 |     }
 99 |   }
100 | }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/components/ChartBlock.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-6" :class="width[blok.width]">
 3 |     <section
 4 |       class="w-full"
 5 |       :class="blok.card ? 'bg-white rounded-lg p-4 md:p-6' : 'md:pl-8'"
 6 |     >
 7 |       <header class="pb-4">
 8 |         <h2 :class="{ 'text-xl': blok.width !== 'full' }">
 9 |           {{ blok.title }}
10 |         </h2>
11 |       </header>
12 |       <div :class="{ 'flex flex-wrap md:-mr-6': !blok.card }">
13 |         <component
14 |           :is="blok.component"
15 |           v-for="blok in blok.body"
16 |           :key="blok._uid"
17 |           :blok="blok"
18 |         ></component>
19 |       </div>
20 |     </section>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: ['blok'],
27 |   data: () => {
28 |     return {
29 |       width: {
30 |         full: 'w-full',
31 |         'one-third': 'w-full md:w-1/3',
32 |         'two-third': 'w-full md:w-2/3'
33 |       }
34 |     }
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/components/ChartObjective.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     xmlns="http://www.w3.org/2000/svg"
  4 |     class="max-w-full"
  5 |     viewBox="0 0 827.7576 662.45223"
  6 |   >
  7 |     <path
  8 |       d="M1013.87834,762.94507c-5.15761,25.4307-275.92458,23.29586-275.51428-.00151C743.52159,737.51437,1014.28857,739.64921,1013.87834,762.94507Z"
  9 |       transform="translate(-186.1212 -118.77389)"
 10 |       fill="#e6e6e6"
 11 |     />
 12 |     <path
 13 |       d="M706.9999,698.11c-1.1561,5.70037-61.84937,5.22184-61.7574-.00034C646.39858,692.4096,707.09185,692.88813,706.9999,698.11Z"
 14 |       transform="translate(-186.1212 -118.77389)"
 15 |       fill="#e6e6e6"
 16 |     />
 17 |     <circle cx="677.54452" cy="189.87917" r="18.90903" fill="#2f2e41" />
 18 |     <path
 19 |       d="M844.783,300.96477l11.83555-2.90077a30.47944,30.47944,0,0,0,29.8681-36.55339v0a39.839,39.839,0,0,0-39.839-39.839h-.00008a39.839,39.839,0,0,0-39.83905,39.839v.00005A31.65877,31.65877,0,0,0,844.783,300.96477Z"
 20 |       transform="translate(-186.1212 -118.77389)"
 21 |       fill="#2f2e41"
 22 |     />
 23 |     <polygon
 24 |       points="734.789 303.376 705.53 261.733 689.646 291.232 707.799 312.41 734.789 303.376"
 25 |       fill="#575a89"
 26 |     />
 27 |     <path
 28 |       d="M905.64376,417.94724s9.07633-3.78181,14.37086,3.02544,14.37086,21.17812,11.34542,23.4472-12.85814-6.80725-12.85814-6.80725Z"
 29 |       transform="translate(-186.1212 -118.77389)"
 30 |       fill="#575a89"
 31 |     />
 32 |     <ellipse
 33 |       cx="922.66189"
 34 |       cy="444.79806"
 35 |       rx="6.80725"
 36 |       ry="12.85814"
 37 |       transform="translate(-262.19502 553.35051) rotate(-38.56071)"
 38 |       fill="#ffb8b8"
 39 |     />
 40 |     <path
 41 |       d="M935.14184,523.08144s-1.51272,48.40711-6.80725,76.39247S931.36,728.05531,931.36,728.05531l-16.63995,7.56361L904.131,724.2735s3.7818-20.42175-1.51272-34.79261-7.56362-76.39248-7.56362-76.39248l-9.07633-83.19972Z"
 42 |       transform="translate(-186.1212 -118.77389)"
 43 |       fill="#ffb8b8"
 44 |     />
 45 |     <path
 46 |       d="M873.12023,537.4523l-47.65075,86.98153-43.11259,79.41792v16.64l-21.93447-6.80725,7.56361-17.39631s3.78181-68.0725,31.01081-94.54514L822.444,534.42686Z"
 47 |       transform="translate(-186.1212 -118.77389)"
 48 |       fill="#ffb8b8"
 49 |     />
 50 |     <path
 51 |       d="M901.48377,420.5945h8.32s45.38166,62.02162,43.11258,99.83967l-65.04706,26.47264-2.26908-5.29452s-53.70164,9.83269-67.31614-1.51273l18.909-96.81422,1.51272-13.6145Z"
 52 |       transform="translate(-186.1212 -118.77389)"
 53 |       fill="#2f2e41"
 54 |     />
 55 |     <path
 56 |       d="M922.28371,727.299s-10.58906-13.6145,2.26908-14.37086,12.85814,7.56361,12.85814,7.56361l28.74172,19.66539s47.65075,17.3963,13.6145,22.69083c0,0-14.37086,3.02545-32.52353-3.78181a107.7077,107.7077,0,0,0-34.03625-6.80725s-16.63994-.75636-16.63994-9.07633S904.685,720.4917,904.685,720.4917,917.74554,729.568,922.28371,727.299Z"
 57 |       transform="translate(-186.1212 -118.77389)"
 58 |       fill="#2f2e41"
 59 |     />
 60 |     <path
 61 |       d="M758.9097,708.38992s25.71628-5.29453,26.47264,4.53817,0,26.47264,0,26.47264-6.05089,7.56361-4.53817,12.85813-3.7818,21.93448-21.93447,19.66539-12.10178-27.98536-12.10178-27.98536l12.10178-29.49808Z"
 62 |       transform="translate(-186.1212 -118.77389)"
 63 |       fill="#2f2e41"
 64 |     />
 65 |     <circle cx="655.23187" cy="146.3884" r="25.3381" fill="#ffb8b8" />
 66 |     <path
 67 |       d="M858.37119,279.155l.37818,43.49077-31.01081-10.58906s3.78181-24.95992,3.02545-27.229Z"
 68 |       transform="translate(-186.1212 -118.77389)"
 69 |       fill="#ffb8b8"
 70 |     />
 71 |     <path
 72 |       d="M864.0439,309.7876s-32.52353-11.34542-36.30534-9.8327-5.29453,9.8327-5.29453,9.8327-18.15266-3.78181-20.42175,8.32,14.37087,65.04706,14.37087,65.04706l16.63994,31.0108s-8.32,12.85814,6.05089,17.39631,66.55978-9.83269,66.55978-9.83269,9.07633-10.58906,0-10.58906c0,0-3.02544-9.8327-6.05089-12.10178s2.26908-6.05089-.75636-6.80725-3.02544-2.26908-3.02544-2.26908,15.12722-20.42175,1.51272-37.0617-15.50541-32.14535-22.31266-34.41443S864.0439,309.7876,864.0439,309.7876Z"
 73 |       transform="translate(-186.1212 -118.77389)"
 74 |       fill="#575a89"
 75 |     />
 76 |     <ellipse
 77 |       cx="847.78213"
 78 |       cy="483.37248"
 79 |       rx="6.80725"
 80 |       ry="12.85814"
 81 |       transform="translate(-105.0728 968.33933) rotate(-67.90768)"
 82 |       fill="#ffb8b8"
 83 |     />
 84 |     <path
 85 |       d="M813.3677,315.83849H802.70442s-30.93658,74.87975-21.86025,98.32694,42.35623,64.2907,42.35623,64.2907,10.58905,18.909,18.15266,18.909,15.88359-27.229,15.88359-27.229L833.03309,459.5471l-28.74172-52.94528,13.6145-40.8435Z"
 86 |       transform="translate(-186.1212 -118.77389)"
 87 |       fill="#575a89"
 88 |     />
 89 |     <polygon
 90 |       points="710.068 270.81 726.708 300.308 723.683 301.821 710.068 270.81"
 91 |       opacity="0.2"
 92 |     />
 93 |     <rect
 94 |       x="873.87641"
 95 |       y="454.75862"
 96 |       width="1.51309"
 97 |       height="88.23853"
 98 |       transform="translate(-282.78364 114.68507) rotate(-14.41613)"
 99 |       opacity="0.2"
100 |     />
101 |     <path
102 |       d="M810.72044,254.95141l4.53816-8.32,6.80725,4.56425h0A7.39238,7.39238,0,0,0,828.2,254.24744l23.76744-.47974a7.83489,7.83489,0,0,0,5.64742-2.572h0a12.386,12.386,0,0,1,7.67982,8.48726l2.90923,11.152V233.01694H822.82221Z"
103 |       transform="translate(-186.1212 -118.77389)"
104 |       fill="#2f2e41"
105 |     />
106 |     <rect width="426.87352" height="549.96668" fill="#e6e6e6" />
107 |     <rect
108 |       x="11.8576"
109 |       y="70.58094"
110 |       width="403.15832"
111 |       height="137.77399"
112 |       fill="#fff"
113 |     />
114 |     <rect
115 |       x="11.8576"
116 |       y="232.07013"
117 |       width="403.15832"
118 |       height="137.77399"
119 |       fill="#fff"
120 |     />
121 |     <rect
122 |       x="11.8576"
123 |       y="393.55932"
124 |       width="403.15832"
125 |       height="137.77399"
126 |       fill="#fff"
127 |     />
128 |     <circle cx="404.28762" cy="21.45661" r="11.29295" fill="#fff" />
129 |     <circle cx="48.84201" cy="300.95712" r="11.29295" fill="#e6e6e6" />
130 |     <rect
131 |       x="81.59157"
132 |       y="291.92276"
133 |       width="106.15373"
134 |       height="18.06872"
135 |       fill="#e6e6e6"
136 |     />
137 |     <circle cx="249.5742" cy="301.52177" r="11.29295" fill="#e6e6e6" />
138 |     <rect
139 |       x="282.32376"
140 |       y="292.48741"
141 |       width="106.15373"
142 |       height="18.06872"
143 |       fill="#e6e6e6"
144 |     />
145 |     <polygon
146 |       points="410.168 17.173 408.571 15.576 404.288 19.86 400.004 15.576 398.407 17.173 402.691 21.457 398.407 25.74 400.004 27.337 404.288 23.053 408.571 27.337 410.168 25.74 405.885 21.457 410.168 17.173"
147 |       fill="#e6e6e6"
148 |     />
149 |     <circle cx="48.84201" cy="139.46794" r="11.29295" fill="#e6e6e6" />
150 |     <rect
151 |       x="102.48352"
152 |       y="129.30428"
153 |       width="286.84094"
154 |       height="18.06872"
155 |       fill="#e6e6e6"
156 |     />
157 |     <rect
158 |       x="84.97945"
159 |       y="129.30428"
160 |       width="257.47927"
161 |       height="18.06872"
162 |       fill="#6c63ff"
163 |     />
164 |     <circle cx="48.84201" cy="462.44631" r="11.29295" fill="#e6e6e6" />
165 |     <rect
166 |       x="102.48352"
167 |       y="452.28266"
168 |       width="286.84094"
169 |       height="18.06872"
170 |       fill="#e6e6e6"
171 |     />
172 |     <rect
173 |       x="84.97945"
174 |       y="452.28266"
175 |       width="161.20686"
176 |       height="18.06872"
177 |       fill="#6c63ff"
178 |     />
179 |     <rect
180 |       x="81.59157"
181 |       y="291.92276"
182 |       width="33.59653"
183 |       height="18.06872"
184 |       fill="#6c63ff"
185 |     />
186 |     <rect
187 |       x="282.32376"
188 |       y="292.48741"
189 |       width="66.62841"
190 |       height="18.06872"
191 |       fill="#6c63ff"
192 |     />
193 |     <path
194 |       d="M699.51345,673.87308c.17358,17.79415-10.34428,24.10956-23.39225,24.23685q-.45464.00443-.905-.00133-.90726-.01071-1.796-.06514c-11.78437-.71893-20.99819-7.16091-21.15963-23.70942-.16706-17.12566,21.50989-38.95143,23.13581-40.56546l.00287-.00148c.06177-.06151.09338-.09226.09338-.09226S699.33988,656.08038,699.51345,673.87308Z"
195 |       transform="translate(-186.1212 -118.77389)"
196 |       fill="#e6e6e6"
197 |     />
198 |   </svg>
199 | </template>
200 | 


--------------------------------------------------------------------------------
/components/ChartResult.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/3 md:pr-6 pb-4">
 3 |     <div
 4 |       class="rounded-lg p-8"
 5 |       :class="{
 6 |         'bg-complementary-300 text-white': blok.highlighted,
 7 |         'bg-white text-primary-500': !blok.highlighted
 8 |       }"
 9 |     >
10 |       <strong class="text-xl">{{ blok.value }}</strong>
11 |       <p>{{ blok.name }}</p>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: ['blok']
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     id="cabbage"
 4 |     class="logo"
 5 |     xml:space="preserve"
 6 |     xmlns="http://www.w3.org/2000/svg"
 7 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 8 |     viewBox="0 0 54.849 54.849"
 9 |   >
10 |     <path
11 |       fill="#008e65"
12 |       d="M47,46.111c7.91-7.673,10.228-19.813,5.172-29.557c-0.449-0.865-0.631-1.862-0.358-2.797
13 |       c0.192-0.657,0.543-1.325,1.186-1.646c0,0-1.917-3.5-6,1c0,0-7.583,5.917,0,16c0,0,3.812,3.531,1,13L47,46.111L47,46.111z"
14 |     />
15 |     <path
16 |       fill="#e0f3ed"
17 |       d="M47,46.111l1-4c2.812-9.469-1-13-1-13c-7.583-10.083,0-16,0-16c0.633-0.698,1.208-1.185,1.738-1.541
18 |       C44.157,6.385,37.463,3.111,30,3.111c-1.488,0-2.944,0.138-4.36,0.387C24.339,0.603,22,1.111,22,1.111
19 |       c-2.008,0-2.37,3.071-2.436,4.283c-2.75,1.265-5.232,3.011-7.334,5.135c-1.115,1.018-2.148,2.128-3.068,3.33
20 |       c0.092,0.013,0.185,0.026,0.275,0.037c-8.041-1.188-9.242,2.102-9.416,3.027c-0.026,0.136-0.028,0.275-0.011,0.413
21 |       c0.267,2.222,1.796,3.418,2.789,3.969c0.506,0.281,0.743,0.866,0.625,1.434C-1.392,45.891,26.656,62.99,44.866,48.321
22 |       c0.116-0.094,0.204-0.205,0.279-0.323C45.74,47.544,47.091,46.023,47,46.111z"
23 |     />
24 |     <path
25 |       fill="#4fba98"
26 |       d="M9.874,13.957c0.037,0.006,0.069,0.012,0.105,0.021c0.685,0.16,7.555,1.999,9.884,11.69
27 |       c0,0,0.482,4.223,5.055,5.174c0.198,0.041,0.4-0.008,0.602-0.02c2.94-0.181,9.419-2.029,9.358,5.46c0,0-2.245,10.104,9.111,9.686
28 |       c0.251-0.009,0.507,0.05,0.723,0.179c0.017,0.01,0.028,0.024,0.044,0.034C50.372,30.766,38,29.111,38,29.111s-14.25-0.625-12-15
29 |       s-4-13-4-13c-2.5,0-2.45,4.769-2.45,4.769c-4.11,1.669-7.697,4.465-10.387,7.979C9.4,13.893,9.624,13.916,9.874,13.957z"
30 |     />
31 |     <path
32 |       fill="#008e65"
33 |       d="M44.866,48.321C26.656,62.99-1.392,45.891,3.425,22.74c0.118-0.568-0.118-1.153-0.625-1.434
34 |       c-0.993-0.551-2.522-1.747-2.789-3.969c-0.017-0.138-0.014-0.276,0.011-0.413c0.177-0.942,1.403-4.349,9.852-2.968
35 |       c0.037,0.006,0.069,0.012,0.105,0.02c0.685,0.16,7.555,1.999,9.884,11.69c0,0,0.482,4.223,5.055,5.174
36 |       c0.198,0.041,0.4-0.008,0.602-0.02c2.94-0.181,9.419-2.029,9.358,5.46c0,0-2.245,10.104,9.111,9.686
37 |       c0.251-0.009,0.507,0.05,0.723,0.179l0,0C45.505,46.617,45.584,47.742,44.866,48.321z"
38 |     />
39 |   </svg>
40 | </template>
41 | 
42 | <style>
43 | .logo {
44 |   animation: 1s appear;
45 | }
46 | 
47 | @keyframes appear {
48 |   0% {
49 |     opacity: 0;
50 |   }
51 |   100% {
52 |     opacity: 1;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap lg:items-start h-screen overflow-y-auto">
 3 |     <div
 4 |       class="w-full lg:w-3/4 lg:h-screen lg:overflow-y-auto flex flex-wrap p-4 md:pt-6 md:px-10"
 5 |     >
 6 |       <header>
 7 |         <h1>{{ name }}</h1>
 8 |       </header>
 9 |       <component
10 |         :is="blok.component"
11 |         v-for="blok in blok.body"
12 |         :key="blok._uid"
13 |         :blok="blok"
14 |       ></component>
15 |     </div>
16 |     <div class="w-full lg:w-1/4 lg:h-full bg-white p-4 pb-12 lg:pt-6 lg:px-10">
17 |       <component
18 |         :is="blok.component"
19 |         v-for="blok in blok.sidebar"
20 |         :key="blok._uid"
21 |         :blok="blok"
22 |       ></component>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   props: ['name', 'blok']
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/StyleSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full pt-8">
 3 |     <header class="pb-6">
 4 |       <h3 class="capitalize">
 5 |         {{ blok.title }}
 6 |       </h3>
 7 |       <p class="pb-2 border-b border-gray-300 text-gray-700">
 8 |         {{ blok.title }} for app theme.
 9 |       </p>
10 |     </header>
11 |     <component
12 |       :is="blok.component"
13 |       v-for="blok in blok.body"
14 |       :key="blok._uid"
15 |       :blok="blok"
16 |     ></component>
17 |     <slot />
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   props: ['blok']
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/icons/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 5 |     viewBox="0 0 512 512"
 6 |     xml:space="preserve"
 7 |   >
 8 |     <path
 9 |       d="M508.875,248.458l-160-160c-4.167-4.167-10.917-4.167-15.083,0c-4.167,4.167-4.167,10.917,0,15.083l141.792,141.792
10 | 			H10.667C4.771,245.333,0,250.104,0,256s4.771,10.667,10.667,10.667h464.917L333.792,408.458c-4.167,4.167-4.167,10.917,0,15.083
11 | 			c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125l160-160C513.042,259.375,513.042,252.625,508.875,248.458z
12 | 			"
13 |     />
14 |   </svg>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components/icons/Bone.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 5 |     viewBox="0 0 64 64"
 6 |     xml:space="preserve"
 7 |   >
 8 |     <path
 9 |       d="M63.0437965,20.4169903c-1.0986023-1.9267006-3.0116997-3.2119007-5.1366997-3.5371017
10 |         c0.7841988-2.0214987,0.6426086-4.3368988-0.4561005-6.2616987c-0.9589005-1.6787004-2.5088005-2.8779001-4.3652-3.3750005
11 |         c-1.8437004-0.4941998-3.7695007-0.2363-5.419899,0.7284999c-3.4131012,1.9921999-4.5879021,6.4189005-2.6191902,9.8672009
12 |         c0.1660881,0.2909985,0.3495903,0.5674,0.5517883,0.8300991l-31.809597,18.575201
13 |         c-0.1220007-0.3017998-0.2656002-0.5956993-0.4287004-0.8809013c-0.9580002-1.6786995-2.5087996-2.8778992-4.3652-3.375
14 |         c-1.8437996-0.4960976-3.7695994-0.2362976-5.4198995,0.7275009c-3.4122,1.9921989-4.5869999,6.4189987-2.6182001,9.8681984
15 |         c1.0996001,1.9267998,3.0127001,3.2100029,5.1366997,3.5361023c-0.7841997,2.0224991-0.6426001,4.3388977,0.4570003,6.2617989
16 |         c0.9581075,1.6786995,2.5078998,2.8768997,4.3642993,3.375c0.6122999,0.1640015,1.2334003,0.2451019,1.8495998,0.2451019
17 |         c1.2422085,0,2.4688005-0.3291016,3.5712996-0.9737015c3.4120998-1.9921989,4.5869083-6.4188995,2.6182003-9.8690987
18 |         c-0.1651001-0.2871017-0.3477001-0.5615005-0.5468998-0.8213005l31.808609-18.5742016
19 |         c0.1210899,0.2987995,0.2626915,0.5897999,0.42379,0.8730011c0.9580002,1.6786995,2.5088005,2.8780003,4.3662109,3.375
20 |         c1.8437881,0.4931984,3.7675896,0.2363987,5.4189987-0.7275009C63.8367958,28.2919903,65.0115967,23.8652897,63.0437965,20.4169903z
21 |         M59.4168968,28.5575886c-1.1856003,0.6905003-2.5674019,0.8789005-3.8936005,0.522501
22 |         c-1.3378983-0.3584003-2.455101-1.2236004-3.1464996-2.4335995c-0.2831993-0.4971008-0.482399-1.0293007-0.5928001-1.580101
23 |         c-0.0634003-0.3164005-0.2762909-0.5830002-0.5702896-0.7157993c-0.2949104-0.1328011-0.6347122-0.1152-0.9140015,0.0487995
24 |         L16.325098,44.2382889c-0.2773933,0.1611023-0.4590006,0.4453011-0.4913006,0.7637024
25 |         c-0.0312004,0.3192978,0.0909081,0.6337967,0.3300991,0.8465996c0.4160004,0.3701973,0.7705002,0.8085976,1.0537014,1.3037987
26 |         c1.4267998,2.5,0.5791073,5.7070007-1.8896008,7.1493988c-1.1864996,0.6924019-2.5712919,0.8759995-3.8955002,0.5233994
27 |         c-1.3368998-0.3583984-2.4540997-1.2235985-3.1454992-2.4354973c-1.0059004-1.7598-0.9062924-3.9746017,0.2538996-5.6416016
28 |         c0.2216997-0.3194008,0.2383003-0.7383003,0.0429001-1.0742989c-0.1806002-0.3095016-0.5107002-0.4970016-0.8642001-0.4970016
29 |         c-0.0303001,0-0.0615001,0.0009995-0.0917997,0.0039024c-1.9872999,0.1893997-3.9307001-0.8320999-4.9345999-2.5889015
30 |         c-1.4266999-2.5-0.5790999-5.7070007,1.8897002-7.1493988c1.1875-0.6934013,2.5712996-0.8789024,3.8944993-0.5225029
31 |         c1.3369007,0.3584023,2.4541006,1.222702,3.1465006,2.4366035c0.2841997,0.4940987,0.4833994,1.027298,0.5928078,1.5838966
32 |         c0.0633917,0.3174019,0.2753916,0.5850029,0.5702915,0.7178001c0.2939005,0.1338005,0.6357088,0.115303,0.915-0.0477982
33 |         l33.9804993-19.8428001c0.2773018-0.1611004,0.4598999-0.4453011,0.4912109-0.7646999
34 |         c0.031189-0.3183002-0.0918083-0.6336994-0.3311081-0.8465996c-0.4198914-0.3731003-0.7763023-0.8125-1.0586014-1.3086014
35 |         c-1.4277-2.499999-0.5800018-5.707099,1.8897095-7.1493988c1.1854897-0.6924,2.5673904-0.8770008,3.8944893-0.5235004
36 |         c1.3369026,0.3584003,2.4541016,1.2236996,3.1465111,2.4356003c1.0048904,1.7616997,0.9052887,3.9755993-0.2549095,5.6415997
37 |         c-0.222599,0.3192997-0.2392006,0.7383003-0.0438995,1.0741997c0.1963005,0.3359013,0.5780983,0.5321999,0.9559975,0.4932003
38 |         c1.9922028-0.1914997,3.9327011,0.8320007,4.9346008,2.5888004C62.7332954,23.9081898,61.8855972,27.1152897,59.4168968,28.5575886z
39 |         "
40 |     />
41 |   </svg>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/components/icons/Charts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 5 |     viewBox="0 0 64 64"
 6 |     enable-background="new 0 0 64 64"
 7 |     xml:space="preserve"
 8 |   >
 9 |     <path
10 |       d="M62.9999847,27.5834064c-0.0023994,0-0.0048981,0-0.0072899,0l-10.5069084,0.0770988
11 |         c-0.4253006,0.0030003-0.8017006,0.2744007-0.9389,0.6767998l-3.4463005,10.1035023l-4.2011986-27.035202
12 |         c-0.0741997-0.4755001-0.4765015-0.8310003-0.9580002-0.8466005c-0.4813995,0.0096998-0.9043007,0.3164005-1.0073013,0.7861004
13 |         l-6.5585976,30.0049l-4.6900005-18.4794998c-0.1152-0.455101-0.527792-0.7520008-1.0004005-0.7539005
14 |         c-0.4687996,0.0146008-0.8642998,0.3535004-0.9517002,0.8143997l-4.6737995,24.7773991L19.0077877,9.8666058
15 |         c-0.0634995-0.4745998-0.4556007-0.8379002-0.9346008-0.8653002c-0.4715996-0.0174999-0.9090996,0.2891006-1.0262985,0.7539005
16 |         l-4.7305002,18.8232994H0.999988c-0.5522,0-0.9999999,0.4473-0.9999999,1s0.4478,1,0.9999999,1h12.0962
17 |         c0.4585085,0,0.8578997-0.3115005,0.9696999-0.7559013l3.6494007-14.5223989l5.1840992,38.8320007
18 |         c0.0650005,0.4863014,0.4736004,0.8535004,0.9643993,0.8671989c0.009201,0,0.0180016,0,0.0272999,0
19 |         c0.4790001,0,0.8931007-0.3407974,0.9819012-0.8144989l4.9874001-26.4365005l4.6181011,18.1991997
20 |         c0.1138,0.4493027,0.5219994,0.7969017,0.9858971,0.7539024c0.4638023-0.0078011,0.8613091-0.3330002,0.9603996-0.7861023
21 |         l6.3203011-28.9130993l4.0024986,25.7577991c0.0708008,0.455101,0.4428024,0.8027992,0.9008026,0.8428001
22 |         c0.4683075,0.0527,0.8857994-0.2383003,1.033699-0.6727982l4.5283012-13.2745018l9.7968979-0.0721989
23 |         c0.5522995-0.0039005,0.9965973-0.455101,0.9926987-1.0078011C63.9960861,28.0267067,63.5487862,27.5834064,62.9999847,27.5834064z"
24 |     />
25 |   </svg>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/components/partials/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white py-4 px-3 md:py-6 md:px-8">
 3 |     <logo class="w-10 h-10 md:w-12 md:h-12" />
 4 |     <nav>
 5 |       <ul class="py-4">
 6 |         <li class="py-2">
 7 |           <nuxt-link to="/" class="nav-link" title="Main dashboard">
 8 |             <charts class="w-6 h-6 md:w-8 md:h-8 fill-current" />
 9 |           </nuxt-link>
10 |         </li>
11 |         <li class="py-2">
12 |           <nuxt-link to="/styleguide" class="nav-link" title="Style guide">
13 |             <bone class="w-6 h-6 md:w-8 md:h-8 fill-current" />
14 |           </nuxt-link>
15 |         </li>
16 |       </ul>
17 |     </nav>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {}
23 | </script>
24 | 
25 | <style scoped>
26 | .nav-link {
27 |   @apply transition-all duration-1000 ease-in-out block w-10 h-10 bg-white text-primary-400 rounded-full flex items-center justify-center shadow-inner;
28 | }
29 | 
30 | @screen md {
31 |   .nav-link {
32 |     @apply w-12 h-12;
33 |   }
34 | }
35 | .nav-link:hover,
36 | .nuxt-link-exact-active {
37 |   @apply bg-primary-400 text-white shadow-lg;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/components/styleguide/Colors.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div
  4 |       v-for="color in colors"
  5 |       :key="color.name"
  6 |       class="flex flex-wrap justify-center md:justify-start -mr-4"
  7 |     >
  8 |       <div v-for="item in color.palette" :key="item.name" class="pr-4 pb-4">
  9 |         <div class="group perspective w-28 h-28 cursor-pointer">
 10 |           <div
 11 |             class="relative group-hover:rotate-y-180 transform-style-3d transition ease-linear duration-700"
 12 |           >
 13 |             <div class="card__front">
 14 |               <p
 15 |                 class="rounded-full w-12 h-12 shadow-inner"
 16 |                 :class="item.color"
 17 |               ></p>
 18 |               <p class="text-center pt-2 font-medium leading-none">
 19 |                 {{ item.hex }}
 20 |               </p>
 21 |             </div>
 22 |             <div :class="item.color" class="card__back">
 23 |               <p class="text-center max-w-full text-white">
 24 |                 <span
 25 |                   class="block leading-tight truncate"
 26 |                   :title="color.name"
 27 |                   >{{ color.name }}</span
 28 |                 >
 29 |                 <span class="text-xl font-bold">{{ item.name }}</span>
 30 |               </p>
 31 |             </div>
 32 |           </div>
 33 |         </div>
 34 |       </div>
 35 |     </div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {
 41 |   components: {},
 42 |   data() {
 43 |     return {
 44 |       colors: [
 45 |         {
 46 |           name: 'primary',
 47 |           palette: [
 48 |             {
 49 |               color: 'bg-primary-50',
 50 |               hex: '#e0f3ed',
 51 |               name: '50'
 52 |             },
 53 |             {
 54 |               color: 'bg-primary-100',
 55 |               hex: '#b3e1d1',
 56 |               name: '100'
 57 |             },
 58 |             {
 59 |               color: 'bg-primary-200',
 60 |               hex: '#81ceb5',
 61 |               name: '200'
 62 |             },
 63 |             {
 64 |               color: 'bg-primary-300',
 65 |               hex: '#4fba98',
 66 |               name: '300'
 67 |             },
 68 |             {
 69 |               color: 'bg-primary-400',
 70 |               hex: '#27ab83',
 71 |               name: '400'
 72 |             },
 73 |             {
 74 |               color: 'bg-primary-500',
 75 |               hex: '#009c71',
 76 |               name: '500'
 77 |             },
 78 |             {
 79 |               color: 'bg-primary-600',
 80 |               hex: '#008e65',
 81 |               name: '600'
 82 |             },
 83 |             {
 84 |               color: 'bg-primary-700',
 85 |               hex: '#007e56',
 86 |               name: '700'
 87 |             },
 88 |             {
 89 |               color: 'bg-primary-800',
 90 |               hex: '#006e49',
 91 |               name: '800'
 92 |             },
 93 |             {
 94 |               color: 'bg-primary-900',
 95 |               hex: '#00522f',
 96 |               name: '900'
 97 |             }
 98 |           ]
 99 |         },
100 |         {
101 |           name: 'complementary',
102 |           palette: [
103 |             {
104 |               color: 'bg-complementary-50',
105 |               hex: '#fce5ea',
106 |               name: '50'
107 |             },
108 |             {
109 |               color: 'bg-complementary-100',
110 |               hex: '#f9bdcb',
111 |               name: '100'
112 |             },
113 |             {
114 |               color: 'bg-complementary-200',
115 |               hex: '#f592a9',
116 |               name: '200'
117 |             },
118 |             {
119 |               color: 'bg-complementary-300',
120 |               hex: '#f06988',
121 |               name: '300'
122 |             },
123 |             {
124 |               color: 'bg-complementary-400',
125 |               hex: '#ea4c6f',
126 |               name: '400'
127 |             },
128 |             {
129 |               color: 'bg-complementary-500',
130 |               hex: '#e63658',
131 |               name: '500'
132 |             },
133 |             {
134 |               color: 'bg-complementary-600',
135 |               hex: '#d53156',
136 |               name: '600'
137 |             },
138 |             {
139 |               color: 'bg-complementary-700',
140 |               hex: '#c02c52',
141 |               name: '700'
142 |             },
143 |             {
144 |               color: 'bg-complementary-800',
145 |               hex: '#ab274f',
146 |               name: '800'
147 |             },
148 |             {
149 |               color: 'bg-complementary-900',
150 |               hex: '#861f48',
151 |               name: '900'
152 |             }
153 |           ]
154 |         }
155 |       ]
156 |     }
157 |   }
158 | }
159 | </script>
160 | 
161 | <style scoped>
162 | .card__front,
163 | .card__back {
164 |   @apply backface-hidden absolute top-0 right-0 rounded-lg flex flex-col items-center justify-center shadow-md w-28 h-28;
165 | }
166 | .card__front {
167 |   @apply bg-white z-10 rotate-y-0 p-4;
168 | }
169 | .card__back {
170 |   @apply rotate-y-180 p-2;
171 | }
172 | </style>
173 | 


--------------------------------------------------------------------------------
/components/styleguide/Fonts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap items-stretch justify-start">
 3 |     <header
 4 |       class="w-full lg:w-auto border-gray-400 pb-6 border-b lg:pb-0 lg:border-b-0 lg:pr-12 lg:border-r"
 5 |     >
 6 |       <h1>Heading h1</h1>
 7 |       <h2>Heading h2</h2>
 8 |       <h3>Heading h3</h3>
 9 |       <h4>Heading h4</h4>
10 |       <h5>Heading h5</h5>
11 |       <h6>Heading h6</h6>
12 |     </header>
13 |     <div
14 |       class="w-full lg:max-w-xl border-gray-400 py-6 border-b lg:py-0 lg:border-b-0 lg:px-12 lg:border-r"
15 |     >
16 |       <p>
17 |         Lorem ipsum dolor sit amet, consectetur
18 |         <span class="italic">italic</span> elit. Vivamus vel fringilla enim, ac
19 |         <span class="text-primary-900">primary 900</span> neque. Sed convallis
20 |         euismod sem, vitae luctus tortor
21 |         <span class="underline">underline</span>
22 |         in. Curabitur sagittis tristique dui, sit amet lacinia dolor porta ac.
23 |       </p>
24 |       <p class="pt-4 font-bold">
25 |         Font bold lorem ipsum amet, consectetur adipiscing elit. Vivamus vel
26 |         fringilla enim, ac euismod neque. Sed convallis euismod sem, vitae
27 |         luctus tortor placerat in. Curabitur sagittis tristique dui, sit amet
28 |         lacinia dolor porta ac.
29 |       </p>
30 |     </div>
31 |     <p
32 |       class="w-full lg:w-auto border-gray-400 pt-6 lg:pt-0 lg:pl-12 flex flex-col items-center justify-center"
33 |     >
34 |       <span class="text-giant leading-none">Aa</span>
35 |       <span class="text-lg">Source Sans Pro</span>
36 |     </p>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/components/styleguide/Gradients.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap -mr-4 md:-mr-6">
 3 |     <div
 4 |       v-for="item in gradients"
 5 |       :key="item.name"
 6 |       class="w-full sm:w-1/2 md:w-56 pr-4 md:pr-6 pb-4"
 7 |     >
 8 |       <p class="flex flex-wrap justify-between items-center pb-4">
 9 |         <span
10 |           class="rounded h-8 w-1/3"
11 |           :class="item.color1"
12 |           :title="item.color1"
13 |         ></span>
14 |         <arrow class="h-6 text-gray-700 fill-current" />
15 |         <span
16 |           class="rounded  h-8 w-1/3"
17 |           :class="item.color2"
18 |           :title="item.color2"
19 |         ></span>
20 |       </p>
21 |       <p
22 |         class="rounded-lg w-full h-32 p-4 shadow-lg text-white flex flex-col items-start justify-end"
23 |         :class="item.gradient"
24 |       >
25 |         {{ item.name }}
26 |       </p>
27 |     </div>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | import Arrow from '~/components/icons/Arrow.vue'
33 | 
34 | export default {
35 |   components: {
36 |     Arrow
37 |   },
38 |   data() {
39 |     return {
40 |       gradients: [
41 |         {
42 |           name: 'primary',
43 |           gradient: 'bg-primary-45',
44 |           color1: 'bg-primary-700',
45 |           color2: 'bg-primary-300'
46 |         },
47 |         {
48 |           name: 'complementary',
49 |           gradient: 'bg-complementary-45',
50 |           color1: 'bg-complementary-700',
51 |           color2: 'bg-complementary-300'
52 |         },
53 |         {
54 |           name: 'mixed',
55 |           gradient: 'bg-mixed-45',
56 |           color1: 'bg-complementary-300',
57 |           color2: 'bg-primary-100'
58 |         }
59 |       ]
60 |     }
61 |   }
62 | }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/components/styleguide/Icons.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="choosenColor">
 3 |     <ul class="w-full flex flex-wrap items-center pb-4">
 4 |       <li><p class="pr-4 pb-2 text-gray-700">Select color</p></li>
 5 |       <li v-for="color in colors" :key="color.bg" class="pr-2">
 6 |         <button
 7 |           :class="color.bg"
 8 |           class="w-6 h-6 rounded-full focus:outline-none"
 9 |           :aria-label="'Choose ' + color.text"
10 |           @click="choosenColor = color.text"
11 |         />
12 |       </li>
13 |     </ul>
14 |     <div class="flex flex-wrap">
15 |       <p class="pb-4 pr-4">
16 |         <bone class="icon-style" />
17 |       </p>
18 |       <p class="pb-4 pr-4">
19 |         <charts class="icon-style" />
20 |       </p>
21 |       <p class="pb-4 pr-4">
22 |         <arrow class="icon-style" />
23 |       </p>
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import Bone from '~/components/icons/Bone.vue'
30 | import Charts from '~/components/icons/Charts.vue'
31 | import Arrow from '~/components/icons/Arrow.vue'
32 | 
33 | export default {
34 |   components: {
35 |     Bone,
36 |     Charts,
37 |     Arrow
38 |   },
39 |   data() {
40 |     return {
41 |       colors: [
42 |         {
43 |           text: 'text-primary-500',
44 |           bg: 'bg-primary-500'
45 |         },
46 |         {
47 |           text: 'text-complementary-300',
48 |           bg: 'bg-complementary-300'
49 |         },
50 |         {
51 |           text: 'text-complementary-700',
52 |           bg: 'bg-complementary-700'
53 |         },
54 |         {
55 |           text: 'text-gray-700',
56 |           bg: 'bg-gray-700'
57 |         }
58 |       ],
59 |       choosenColor: ''
60 |     }
61 |   }
62 | }
63 | </script>
64 | 
65 | <style scoped>
66 | .icon-style {
67 |   @apply bg-white rounded-lg shadow-md p-2 w-12 h-12 fill-current;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex min-h-screen bg-primary-50">
 3 |     <sidebar />
 4 |     <nuxt class="flex-auto" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {}
10 | </script>
11 | 
12 | <style scoped>
13 | .page-enter-active {
14 |   animation: acrossIn 0.6s ease-out both;
15 | }
16 | .page-leave-active {
17 |   animation: acrossOut 0.4s ease-in both;
18 | }
19 | @keyframes acrossIn {
20 |   0% {
21 |     transform: translate3d(-0.35%, 0, 0);
22 |     opacity: 0;
23 |   }
24 |   100% {
25 |     transform: translate3d(0, 0, 0);
26 |     opacity: 1;
27 |   }
28 | }
29 | @keyframes acrossOut {
30 |   0% {
31 |     transform: translate3d(0%, 0, 0);
32 |     opacity: 0.15;
33 |   }
34 |   100% {
35 |     transform: translate3d(20%, 0, 0);
36 |     opacity: 0;
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // Target (https://go.nuxtjs.dev/config-target)
 3 |   target: 'server',
 4 |   /*
 5 |    ** Headers of the page
 6 |    */
 7 |   head: {
 8 |     title: process.env.npm_package_name || '',
 9 |     meta: [
10 |       { charset: 'utf-8' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 |       {
13 |         hid: 'description',
14 |         name: 'description',
15 |         content: process.env.npm_package_description || '',
16 |       },
17 |     ],
18 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
19 |   },
20 |   /*
21 |    ** Customize the progress-bar color
22 |    */
23 |   loading: { color: '#fff' },
24 |   /*
25 |    ** Global CSS
26 |    */
27 |   css: [],
28 |   /*
29 |    ** Plugins to load before mounting the App
30 |    */
31 |   plugins: [
32 |     '~/plugins/components.js',
33 |     { src: '~/plugins/vue-apex-charts.js', mode: 'client' },
34 |   ],
35 |   components: [
36 |     '~/components',
37 |     '~/components/icons',
38 |     '~/components/styleguide',
39 |     '~/components/partials',
40 |   ],
41 |   /*
42 |    ** Nuxt.js dev-modules
43 |    */
44 |   buildModules: [
45 |     // Doc: https://github.com/nuxt-community/eslint-module
46 |     '@nuxtjs/eslint-module',
47 |     // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
48 |     '@nuxtjs/tailwindcss',
49 |     '@nuxtjs/moment',
50 |   ],
51 |   /*
52 |    ** Nuxt.js modules
53 |    */
54 |   modules: [
55 |     '@nuxtjs/pwa',
56 |     [
57 |       'storyblok-nuxt',
58 |       {
59 |         accessToken: process.env.API_KEY,
60 |         cacheProvider: 'memory',
61 |       },
62 |     ],
63 |   ],
64 |   /*
65 |    ** Build configuration
66 |    */
67 |   build: {
68 |     /*
69 |      ** You can extend webpack config here
70 |      */
71 |     extend(config, ctx) {},
72 |   },
73 | }
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cabbage",
 3 |   "version": "1.0.0",
 4 |   "description": "Cabbage is a dashboard to measure the progress of your health goals.",
 5 |   "author": "dawntraoz",
 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 |   },
14 |   "dependencies": {
15 |     "@nuxtjs/pwa": "^3.3.5",
16 |     "apexcharts": "^3.25.0",
17 |     "axios": "^0.21.1",
18 |     "nuxt": "^2.15.0",
19 |     "storyblok-nuxt": "^2.0.1",
20 |     "vue-apexcharts": "^1.6.0"
21 |   },
22 |   "devDependencies": {
23 |     "@nuxtjs/eslint-config": "^6.0.1",
24 |     "@nuxtjs/eslint-module": "^3.0.2",
25 |     "@nuxtjs/moment": "^1.6.1",
26 |     "@nuxtjs/tailwindcss": "^4.1.3",
27 |     "babel-eslint": "^10.0.1",
28 |     "eslint": "^7.20.0",
29 |     "eslint-config-prettier": "^8.3.0",
30 |     "eslint-plugin-nuxt": "^2.0.0",
31 |     "eslint-plugin-prettier": "^3.3.1",
32 |     "prettier": "^2.2.1",
33 |     "tailwindcss-plugins": "^0.3.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/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](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component
 3 |     :is="story.content.component"
 4 |     v-if="story.content.component"
 5 |     :key="story.content._uid"
 6 |     :name="story.name"
 7 |     :blok="story.content"
 8 |   ></component>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   asyncData(context) {
14 |     const slug = context.params.slug ? context.params.slug : 'home'
15 | 
16 |     // Load the JSON from the API
17 |     return context.app.$storyapi
18 |       .get(`cdn/stories/${slug}`, {
19 |         version:
20 |           context.query._storyblok || context.isDev ? 'draft' : 'published',
21 |       })
22 |       .then((res) => {
23 |         return res.data
24 |       })
25 |       .catch((res) => {
26 |         context.error({
27 |           statusCode: res.response.status,
28 |           message: res.response.data,
29 |         })
30 |       })
31 |   },
32 |   data() {
33 |     return { story: { content: {} } }
34 |   },
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/plugins/components.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Page from '@/components/Page.vue'
 3 | import StyleSection from '@/components/StyleSection.vue'
 4 | 
 5 | /* Styleguide components */
 6 | import Colors from '@/components/styleguide/Colors.vue'
 7 | import Gradients from '@/components/styleguide/Gradients.vue'
 8 | import Fonts from '@/components/styleguide/Fonts.vue'
 9 | import Icons from '@/components/styleguide/Icons.vue'
10 | 
11 | /* Dashboard */
12 | import ChartBlock from '@/components/ChartBlock.vue'
13 | import ChartActivity from '@/components/ChartActivity.vue'
14 | import ChartObjective from '@/components/ChartObjective.vue'
15 | import ChartResult from '@/components/ChartResult.vue'
16 | 
17 | Vue.component('page', Page)
18 | Vue.component('style-section', StyleSection)
19 | 
20 | /* Styleguide components */
21 | Vue.component('colors', Colors)
22 | Vue.component('gradients', Gradients)
23 | Vue.component('fonts', Fonts)
24 | Vue.component('icons', Icons)
25 | 
26 | /* Dashboard */
27 | Vue.component('ChartBlock', ChartBlock)
28 | Vue.component('ChartActivity', ChartActivity)
29 | Vue.component('ChartObjective', ChartObjective)
30 | Vue.component('ChartResult', ChartResult)
31 | 


--------------------------------------------------------------------------------
/plugins/vue-apex-charts.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueApexCharts from 'vue-apexcharts'
3 | 
4 | Vue.use(VueApexCharts)
5 | Vue.component('VueApexCharts', VueApexCharts)
6 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dawntraoz/cabbage/3c96ca23bc0e050c7402c9a3b86a0523ae073962/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dawntraoz/cabbage/3c96ca23bc0e050c7402c9a3b86a0523ae073962/static/icon.png


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
   1 | const colors = require('tailwindcss/colors')
   2 | const plugin = require('tailwindcss/plugin')
   3 | 
   4 | module.exports = {
   5 |   purge: [],
   6 |   presets: [],
   7 |   darkMode: false, // or 'media' or 'class'
   8 |   theme: {
   9 |     extend: {
  10 |       colors: {
  11 |         primary: {
  12 |           50: '#e0f3ed',
  13 |           100: '#b3e1d1',
  14 |           200: '#81ceb5',
  15 |           300: '#4fba98',
  16 |           400: '#27ab83',
  17 |           500: '#009c71',
  18 |           600: '#008e65',
  19 |           700: '#007e56',
  20 |           800: '#006e49',
  21 |           900: '#00522f'
  22 |         },
  23 |         complementary: {
  24 |           50: '#fce5ea',
  25 |           100: '#f9bdcb',
  26 |           200: '#f592a9',
  27 |           300: '#f06988',
  28 |           400: '#ea4c6f',
  29 |           500: '#e63658',
  30 |           600: '#d53156',
  31 |           700: '#c02c52',
  32 |           800: '#ab274f',
  33 |           900: '#861f48'
  34 |         }
  35 |       },
  36 |       fontFamily: {
  37 |         sans: ['Source Sans Pro', 'sans-serif']
  38 |       },
  39 |       fontSize: {
  40 |         giant: '8rem'
  41 |       }
  42 |     },
  43 |     screens: {
  44 |       sm: '640px',
  45 |       md: '768px',
  46 |       lg: '1024px',
  47 |       xl: '1280px',
  48 |     },
  49 |     colors: {
  50 |       transparent: 'transparent',
  51 |       current: 'currentColor',
  52 | 
  53 |       black: colors.black,
  54 |       white: colors.white,
  55 |       gray: colors.coolGray,
  56 |       red: colors.red,
  57 |       yellow: colors.amber,
  58 |       green: colors.emerald,
  59 |       blue: colors.blue,
  60 |       indigo: colors.indigo,
  61 |       purple: colors.violet,
  62 |       pink: colors.pink,
  63 |     },
  64 |     spacing: {
  65 |       px: '1px',
  66 |       0: '0px',
  67 |       0.5: '0.125rem',
  68 |       1: '0.25rem',
  69 |       1.5: '0.375rem',
  70 |       2: '0.5rem',
  71 |       2.5: '0.625rem',
  72 |       3: '0.75rem',
  73 |       3.5: '0.875rem',
  74 |       4: '1rem',
  75 |       5: '1.25rem',
  76 |       6: '1.5rem',
  77 |       7: '1.75rem',
  78 |       8: '2rem',
  79 |       9: '2.25rem',
  80 |       10: '2.5rem',
  81 |       11: '2.75rem',
  82 |       12: '3rem',
  83 |       14: '3.5rem',
  84 |       16: '4rem',
  85 |       20: '5rem',
  86 |       24: '6rem',
  87 |       28: '7rem',
  88 |       32: '8rem',
  89 |       36: '9rem',
  90 |       40: '10rem',
  91 |       44: '11rem',
  92 |       48: '12rem',
  93 |       52: '13rem',
  94 |       56: '14rem',
  95 |       60: '15rem',
  96 |       64: '16rem',
  97 |       72: '18rem',
  98 |       80: '20rem',
  99 |       96: '24rem',
 100 |     },
 101 |     animation: {
 102 |       none: 'none',
 103 |       spin: 'spin 1s linear infinite',
 104 |       ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
 105 |       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
 106 |       bounce: 'bounce 1s infinite',
 107 |     },
 108 |     backdropBlur: (theme) => theme('blur'),
 109 |     backdropBrightness: (theme) => theme('brightness'),
 110 |     backdropContrast: (theme) => theme('contrast'),
 111 |     backdropGrayscale: (theme) => theme('grayscale'),
 112 |     backdropHueRotate: (theme) => theme('hueRotate'),
 113 |     backdropInvert: (theme) => theme('invert'),
 114 |     backdropOpacity: (theme) => theme('opacity'),
 115 |     backdropSaturate: (theme) => theme('saturate'),
 116 |     backdropSepia: (theme) => theme('sepia'),
 117 |     backgroundColor: (theme) => theme('colors'),
 118 |     backgroundImage: {
 119 |       none: 'none',
 120 |       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
 121 |       'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
 122 |       'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
 123 |       'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
 124 |       'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
 125 |       'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
 126 |       'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
 127 |       'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
 128 |     },
 129 |     backgroundOpacity: (theme) => theme('opacity'),
 130 |     backgroundPosition: {
 131 |       bottom: 'bottom',
 132 |       center: 'center',
 133 |       left: 'left',
 134 |       'left-bottom': 'left bottom',
 135 |       'left-top': 'left top',
 136 |       right: 'right',
 137 |       'right-bottom': 'right bottom',
 138 |       'right-top': 'right top',
 139 |       top: 'top',
 140 |     },
 141 |     backgroundSize: {
 142 |       auto: 'auto',
 143 |       cover: 'cover',
 144 |       contain: 'contain',
 145 |     },
 146 |     blur: {
 147 |       0: '0',
 148 |       sm: '4px',
 149 |       DEFAULT: '8px',
 150 |       md: '12px',
 151 |       lg: '16px',
 152 |       xl: '24px',
 153 |       '2xl': '40px',
 154 |       '3xl': '64px',
 155 |     },
 156 |     brightness: {
 157 |       0: '0',
 158 |       50: '.5',
 159 |       75: '.75',
 160 |       90: '.9',
 161 |       95: '.95',
 162 |       100: '1',
 163 |       105: '1.05',
 164 |       110: '1.1',
 165 |       125: '1.25',
 166 |       150: '1.5',
 167 |       200: '2',
 168 |     },
 169 |     borderColor: (theme) => ({
 170 |       ...theme('colors'),
 171 |       DEFAULT: theme('colors.gray.200', 'currentColor'),
 172 |     }),
 173 |     borderOpacity: (theme) => theme('opacity'),
 174 |     borderRadius: {
 175 |       none: '0px',
 176 |       sm: '0.125rem',
 177 |       DEFAULT: '0.25rem',
 178 |       md: '0.375rem',
 179 |       lg: '0.5rem',
 180 |       xl: '0.75rem',
 181 |       '2xl': '1rem',
 182 |       '3xl': '1.5rem',
 183 |       full: '9999px',
 184 |     },
 185 |     borderWidth: {
 186 |       DEFAULT: '1px',
 187 |       0: '0px',
 188 |       2: '2px',
 189 |       4: '4px',
 190 |       8: '8px',
 191 |     },
 192 |     boxShadow: {
 193 |       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
 194 |       DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
 195 |       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
 196 |       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
 197 |       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
 198 |       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
 199 |       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
 200 |       none: 'none',
 201 |     },
 202 |     contrast: {
 203 |       0: '0',
 204 |       50: '.5',
 205 |       75: '.75',
 206 |       100: '1',
 207 |       125: '1.25',
 208 |       150: '1.5',
 209 |       200: '2',
 210 |     },
 211 |     container: {},
 212 |     cursor: {
 213 |       auto: 'auto',
 214 |       default: 'default',
 215 |       pointer: 'pointer',
 216 |       wait: 'wait',
 217 |       text: 'text',
 218 |       move: 'move',
 219 |       help: 'help',
 220 |       'not-allowed': 'not-allowed',
 221 |     },
 222 |     divideColor: (theme) => theme('borderColor'),
 223 |     divideOpacity: (theme) => theme('borderOpacity'),
 224 |     divideWidth: (theme) => theme('borderWidth'),
 225 |     dropShadow: {
 226 |       sm: '0 1px 1px rgba(0,0,0,0.05)',
 227 |       DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
 228 |       md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
 229 |       lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
 230 |       xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
 231 |       '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
 232 |       none: '0 0 #0000',
 233 |     },
 234 |     fill: { current: 'currentColor' },
 235 |     grayscale: {
 236 |       0: '0',
 237 |       DEFAULT: '100%',
 238 |     },
 239 |     hueRotate: {
 240 |       '-180': '-180deg',
 241 |       '-90': '-90deg',
 242 |       '-60': '-60deg',
 243 |       '-30': '-30deg',
 244 |       '-15': '-15deg',
 245 |       0: '0deg',
 246 |       15: '15deg',
 247 |       30: '30deg',
 248 |       60: '60deg',
 249 |       90: '90deg',
 250 |       180: '180deg',
 251 |     },
 252 |     invert: {
 253 |       0: '0',
 254 |       DEFAULT: '100%',
 255 |     },
 256 |     flex: {
 257 |       1: '1 1 0%',
 258 |       auto: '1 1 auto',
 259 |       initial: '0 1 auto',
 260 |       none: 'none',
 261 |     },
 262 |     flexGrow: {
 263 |       0: '0',
 264 |       DEFAULT: '1',
 265 |     },
 266 |     flexShrink: {
 267 |       0: '0',
 268 |       DEFAULT: '1',
 269 |     },
 270 |     fontFamily: {
 271 |       sans: [
 272 |         'ui-sans-serif',
 273 |         'system-ui',
 274 |         '-apple-system',
 275 |         'BlinkMacSystemFont',
 276 |         '"Segoe UI"',
 277 |         'Roboto',
 278 |         '"Helvetica Neue"',
 279 |         'Arial',
 280 |         '"Noto Sans"',
 281 |         'sans-serif',
 282 |         '"Apple Color Emoji"',
 283 |         '"Segoe UI Emoji"',
 284 |         '"Segoe UI Symbol"',
 285 |         '"Noto Color Emoji"',
 286 |       ],
 287 |       serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
 288 |       mono: [
 289 |         'ui-monospace',
 290 |         'SFMono-Regular',
 291 |         'Menlo',
 292 |         'Monaco',
 293 |         'Consolas',
 294 |         '"Liberation Mono"',
 295 |         '"Courier New"',
 296 |         'monospace',
 297 |       ],
 298 |     },
 299 |     fontSize: {
 300 |       xs: ['0.75rem', { lineHeight: '1rem' }],
 301 |       sm: ['0.875rem', { lineHeight: '1.25rem' }],
 302 |       base: ['1rem', { lineHeight: '1.5rem' }],
 303 |       lg: ['1.125rem', { lineHeight: '1.75rem' }],
 304 |       xl: ['1.25rem', { lineHeight: '1.75rem' }],
 305 |       '2xl': ['1.5rem', { lineHeight: '2rem' }],
 306 |       '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
 307 |       '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
 308 |       '5xl': ['3rem', { lineHeight: '1' }],
 309 |       '6xl': ['3.75rem', { lineHeight: '1' }],
 310 |       '7xl': ['4.5rem', { lineHeight: '1' }],
 311 |       '8xl': ['6rem', { lineHeight: '1' }],
 312 |       '9xl': ['8rem', { lineHeight: '1' }],
 313 |     },
 314 |     fontWeight: {
 315 |       thin: '100',
 316 |       extralight: '200',
 317 |       light: '300',
 318 |       normal: '400',
 319 |       medium: '500',
 320 |       semibold: '600',
 321 |       bold: '700',
 322 |       extrabold: '800',
 323 |       black: '900',
 324 |     },
 325 |     gap: (theme) => theme('spacing'),
 326 |     gradientColorStops: (theme) => theme('colors'),
 327 |     gridAutoColumns: {
 328 |       auto: 'auto',
 329 |       min: 'min-content',
 330 |       max: 'max-content',
 331 |       fr: 'minmax(0, 1fr)',
 332 |     },
 333 |     gridAutoRows: {
 334 |       auto: 'auto',
 335 |       min: 'min-content',
 336 |       max: 'max-content',
 337 |       fr: 'minmax(0, 1fr)',
 338 |     },
 339 |     gridColumn: {
 340 |       auto: 'auto',
 341 |       'span-1': 'span 1 / span 1',
 342 |       'span-2': 'span 2 / span 2',
 343 |       'span-3': 'span 3 / span 3',
 344 |       'span-4': 'span 4 / span 4',
 345 |       'span-5': 'span 5 / span 5',
 346 |       'span-6': 'span 6 / span 6',
 347 |       'span-7': 'span 7 / span 7',
 348 |       'span-8': 'span 8 / span 8',
 349 |       'span-9': 'span 9 / span 9',
 350 |       'span-10': 'span 10 / span 10',
 351 |       'span-11': 'span 11 / span 11',
 352 |       'span-12': 'span 12 / span 12',
 353 |       'span-full': '1 / -1',
 354 |     },
 355 |     gridColumnEnd: {
 356 |       auto: 'auto',
 357 |       1: '1',
 358 |       2: '2',
 359 |       3: '3',
 360 |       4: '4',
 361 |       5: '5',
 362 |       6: '6',
 363 |       7: '7',
 364 |       8: '8',
 365 |       9: '9',
 366 |       10: '10',
 367 |       11: '11',
 368 |       12: '12',
 369 |       13: '13',
 370 |     },
 371 |     gridColumnStart: {
 372 |       auto: 'auto',
 373 |       1: '1',
 374 |       2: '2',
 375 |       3: '3',
 376 |       4: '4',
 377 |       5: '5',
 378 |       6: '6',
 379 |       7: '7',
 380 |       8: '8',
 381 |       9: '9',
 382 |       10: '10',
 383 |       11: '11',
 384 |       12: '12',
 385 |       13: '13',
 386 |     },
 387 |     gridRow: {
 388 |       auto: 'auto',
 389 |       'span-1': 'span 1 / span 1',
 390 |       'span-2': 'span 2 / span 2',
 391 |       'span-3': 'span 3 / span 3',
 392 |       'span-4': 'span 4 / span 4',
 393 |       'span-5': 'span 5 / span 5',
 394 |       'span-6': 'span 6 / span 6',
 395 |       'span-full': '1 / -1',
 396 |     },
 397 |     gridRowStart: {
 398 |       auto: 'auto',
 399 |       1: '1',
 400 |       2: '2',
 401 |       3: '3',
 402 |       4: '4',
 403 |       5: '5',
 404 |       6: '6',
 405 |       7: '7',
 406 |     },
 407 |     gridRowEnd: {
 408 |       auto: 'auto',
 409 |       1: '1',
 410 |       2: '2',
 411 |       3: '3',
 412 |       4: '4',
 413 |       5: '5',
 414 |       6: '6',
 415 |       7: '7',
 416 |     },
 417 |     gridTemplateColumns: {
 418 |       none: 'none',
 419 |       1: 'repeat(1, minmax(0, 1fr))',
 420 |       2: 'repeat(2, minmax(0, 1fr))',
 421 |       3: 'repeat(3, minmax(0, 1fr))',
 422 |       4: 'repeat(4, minmax(0, 1fr))',
 423 |       5: 'repeat(5, minmax(0, 1fr))',
 424 |       6: 'repeat(6, minmax(0, 1fr))',
 425 |       7: 'repeat(7, minmax(0, 1fr))',
 426 |       8: 'repeat(8, minmax(0, 1fr))',
 427 |       9: 'repeat(9, minmax(0, 1fr))',
 428 |       10: 'repeat(10, minmax(0, 1fr))',
 429 |       11: 'repeat(11, minmax(0, 1fr))',
 430 |       12: 'repeat(12, minmax(0, 1fr))',
 431 |     },
 432 |     gridTemplateRows: {
 433 |       none: 'none',
 434 |       1: 'repeat(1, minmax(0, 1fr))',
 435 |       2: 'repeat(2, minmax(0, 1fr))',
 436 |       3: 'repeat(3, minmax(0, 1fr))',
 437 |       4: 'repeat(4, minmax(0, 1fr))',
 438 |       5: 'repeat(5, minmax(0, 1fr))',
 439 |       6: 'repeat(6, minmax(0, 1fr))',
 440 |     },
 441 |     height: (theme) => ({
 442 |       auto: 'auto',
 443 |       ...theme('spacing'),
 444 |       '1/2': '50%',
 445 |       '1/3': '33.333333%',
 446 |       '2/3': '66.666667%',
 447 |       '1/4': '25%',
 448 |       '2/4': '50%',
 449 |       '3/4': '75%',
 450 |       '1/5': '20%',
 451 |       '2/5': '40%',
 452 |       '3/5': '60%',
 453 |       '4/5': '80%',
 454 |       '1/6': '16.666667%',
 455 |       '2/6': '33.333333%',
 456 |       '3/6': '50%',
 457 |       '4/6': '66.666667%',
 458 |       '5/6': '83.333333%',
 459 |       full: '100%',
 460 |       screen: '100vh',
 461 |     }),
 462 |     inset: (theme, { negative }) => ({
 463 |       auto: 'auto',
 464 |       ...theme('spacing'),
 465 |       ...negative(theme('spacing')),
 466 |       '1/2': '50%',
 467 |       '1/3': '33.333333%',
 468 |       '2/3': '66.666667%',
 469 |       '1/4': '25%',
 470 |       '2/4': '50%',
 471 |       '3/4': '75%',
 472 |       full: '100%',
 473 |       '-1/2': '-50%',
 474 |       '-1/3': '-33.333333%',
 475 |       '-2/3': '-66.666667%',
 476 |       '-1/4': '-25%',
 477 |       '-2/4': '-50%',
 478 |       '-3/4': '-75%',
 479 |       '-full': '-100%',
 480 |     }),
 481 |     keyframes: {
 482 |       spin: {
 483 |         to: {
 484 |           transform: 'rotate(360deg)',
 485 |         },
 486 |       },
 487 |       ping: {
 488 |         '75%, 100%': {
 489 |           transform: 'scale(2)',
 490 |           opacity: '0',
 491 |         },
 492 |       },
 493 |       pulse: {
 494 |         '50%': {
 495 |           opacity: '.5',
 496 |         },
 497 |       },
 498 |       bounce: {
 499 |         '0%, 100%': {
 500 |           transform: 'translateY(-25%)',
 501 |           animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
 502 |         },
 503 |         '50%': {
 504 |           transform: 'none',
 505 |           animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
 506 |         },
 507 |       },
 508 |     },
 509 |     letterSpacing: {
 510 |       tighter: '-0.05em',
 511 |       tight: '-0.025em',
 512 |       normal: '0em',
 513 |       wide: '0.025em',
 514 |       wider: '0.05em',
 515 |       widest: '0.1em',
 516 |     },
 517 |     lineHeight: {
 518 |       none: '1',
 519 |       tight: '1.25',
 520 |       snug: '1.375',
 521 |       normal: '1.5',
 522 |       relaxed: '1.625',
 523 |       loose: '2',
 524 |       3: '.75rem',
 525 |       4: '1rem',
 526 |       5: '1.25rem',
 527 |       6: '1.5rem',
 528 |       7: '1.75rem',
 529 |       8: '2rem',
 530 |       9: '2.25rem',
 531 |       10: '2.5rem',
 532 |     },
 533 |     listStyleType: {
 534 |       none: 'none',
 535 |       disc: 'disc',
 536 |       decimal: 'decimal',
 537 |     },
 538 |     margin: (theme, { negative }) => ({
 539 |       auto: 'auto',
 540 |       ...theme('spacing'),
 541 |       ...negative(theme('spacing')),
 542 |     }),
 543 |     maxHeight: (theme) => ({
 544 |       ...theme('spacing'),
 545 |       full: '100%',
 546 |       screen: '100vh',
 547 |     }),
 548 |     maxWidth: (theme, { breakpoints }) => ({
 549 |       none: 'none',
 550 |       0: '0rem',
 551 |       xs: '20rem',
 552 |       sm: '24rem',
 553 |       md: '28rem',
 554 |       lg: '32rem',
 555 |       xl: '36rem',
 556 |       '2xl': '42rem',
 557 |       '3xl': '48rem',
 558 |       '4xl': '56rem',
 559 |       '5xl': '64rem',
 560 |       '6xl': '72rem',
 561 |       '7xl': '80rem',
 562 |       full: '100%',
 563 |       min: 'min-content',
 564 |       max: 'max-content',
 565 |       prose: '65ch',
 566 |       ...breakpoints(theme('screens')),
 567 |     }),
 568 |     minHeight: {
 569 |       0: '0px',
 570 |       full: '100%',
 571 |       screen: '100vh',
 572 |     },
 573 |     minWidth: {
 574 |       0: '0px',
 575 |       full: '100%',
 576 |       min: 'min-content',
 577 |       max: 'max-content',
 578 |     },
 579 |     objectPosition: {
 580 |       bottom: 'bottom',
 581 |       center: 'center',
 582 |       left: 'left',
 583 |       'left-bottom': 'left bottom',
 584 |       'left-top': 'left top',
 585 |       right: 'right',
 586 |       'right-bottom': 'right bottom',
 587 |       'right-top': 'right top',
 588 |       top: 'top',
 589 |     },
 590 |     opacity: {
 591 |       0: '0',
 592 |       5: '0.05',
 593 |       10: '0.1',
 594 |       20: '0.2',
 595 |       25: '0.25',
 596 |       30: '0.3',
 597 |       40: '0.4',
 598 |       50: '0.5',
 599 |       60: '0.6',
 600 |       70: '0.7',
 601 |       75: '0.75',
 602 |       80: '0.8',
 603 |       90: '0.9',
 604 |       95: '0.95',
 605 |       100: '1',
 606 |     },
 607 |     order: {
 608 |       first: '-9999',
 609 |       last: '9999',
 610 |       none: '0',
 611 |       1: '1',
 612 |       2: '2',
 613 |       3: '3',
 614 |       4: '4',
 615 |       5: '5',
 616 |       6: '6',
 617 |       7: '7',
 618 |       8: '8',
 619 |       9: '9',
 620 |       10: '10',
 621 |       11: '11',
 622 |       12: '12',
 623 |     },
 624 |     outline: {
 625 |       none: ['2px solid transparent', '2px'],
 626 |       white: ['2px dotted white', '2px'],
 627 |       black: ['2px dotted black', '2px'],
 628 |     },
 629 |     padding: (theme) => theme('spacing'),
 630 |     placeholderColor: (theme) => theme('colors'),
 631 |     placeholderOpacity: (theme) => theme('opacity'),
 632 |     ringColor: (theme) => ({
 633 |       DEFAULT: theme('colors.blue.500', '#3b82f6'),
 634 |       ...theme('colors'),
 635 |     }),
 636 |     ringOffsetColor: (theme) => theme('colors'),
 637 |     ringOffsetWidth: {
 638 |       0: '0px',
 639 |       1: '1px',
 640 |       2: '2px',
 641 |       4: '4px',
 642 |       8: '8px',
 643 |     },
 644 |     ringOpacity: (theme) => ({
 645 |       DEFAULT: '0.5',
 646 |       ...theme('opacity'),
 647 |     }),
 648 |     ringWidth: {
 649 |       DEFAULT: '3px',
 650 |       0: '0px',
 651 |       1: '1px',
 652 |       2: '2px',
 653 |       4: '4px',
 654 |       8: '8px',
 655 |     },
 656 |     rotate: {
 657 |       '-180': '-180deg',
 658 |       '-90': '-90deg',
 659 |       '-45': '-45deg',
 660 |       '-12': '-12deg',
 661 |       '-6': '-6deg',
 662 |       '-3': '-3deg',
 663 |       '-2': '-2deg',
 664 |       '-1': '-1deg',
 665 |       0: '0deg',
 666 |       1: '1deg',
 667 |       2: '2deg',
 668 |       3: '3deg',
 669 |       6: '6deg',
 670 |       12: '12deg',
 671 |       45: '45deg',
 672 |       90: '90deg',
 673 |       180: '180deg',
 674 |     },
 675 |     saturate: {
 676 |       0: '0',
 677 |       50: '.5',
 678 |       100: '1',
 679 |       150: '1.5',
 680 |       200: '2',
 681 |     },
 682 |     scale: {
 683 |       0: '0',
 684 |       50: '.5',
 685 |       75: '.75',
 686 |       90: '.9',
 687 |       95: '.95',
 688 |       100: '1',
 689 |       105: '1.05',
 690 |       110: '1.1',
 691 |       125: '1.25',
 692 |       150: '1.5',
 693 |     },
 694 |     sepia: {
 695 |       0: '0',
 696 |       DEFAULT: '100%',
 697 |     },
 698 |     skew: {
 699 |       '-12': '-12deg',
 700 |       '-6': '-6deg',
 701 |       '-3': '-3deg',
 702 |       '-2': '-2deg',
 703 |       '-1': '-1deg',
 704 |       0: '0deg',
 705 |       1: '1deg',
 706 |       2: '2deg',
 707 |       3: '3deg',
 708 |       6: '6deg',
 709 |       12: '12deg',
 710 |     },
 711 |     space: (theme, { negative }) => ({
 712 |       ...theme('spacing'),
 713 |       ...negative(theme('spacing')),
 714 |     }),
 715 |     stroke: {
 716 |       current: 'currentColor',
 717 |     },
 718 |     strokeWidth: {
 719 |       0: '0',
 720 |       1: '1',
 721 |       2: '2',
 722 |     },
 723 |     textColor: (theme) => theme('colors'),
 724 |     textOpacity: (theme) => theme('opacity'),
 725 |     transformOrigin: {
 726 |       center: 'center',
 727 |       top: 'top',
 728 |       'top-right': 'top right',
 729 |       right: 'right',
 730 |       'bottom-right': 'bottom right',
 731 |       bottom: 'bottom',
 732 |       'bottom-left': 'bottom left',
 733 |       left: 'left',
 734 |       'top-left': 'top left',
 735 |     },
 736 |     transitionDelay: {
 737 |       75: '75ms',
 738 |       100: '100ms',
 739 |       150: '150ms',
 740 |       200: '200ms',
 741 |       300: '300ms',
 742 |       500: '500ms',
 743 |       700: '700ms',
 744 |       1000: '1000ms',
 745 |     },
 746 |     transitionDuration: {
 747 |       DEFAULT: '150ms',
 748 |       75: '75ms',
 749 |       100: '100ms',
 750 |       150: '150ms',
 751 |       200: '200ms',
 752 |       300: '300ms',
 753 |       500: '500ms',
 754 |       700: '700ms',
 755 |       1000: '1000ms',
 756 |     },
 757 |     transitionProperty: {
 758 |       none: 'none',
 759 |       all: 'all',
 760 |       DEFAULT:
 761 |         'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
 762 |       colors: 'background-color, border-color, color, fill, stroke',
 763 |       opacity: 'opacity',
 764 |       shadow: 'box-shadow',
 765 |       transform: 'transform',
 766 |     },
 767 |     transitionTimingFunction: {
 768 |       DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
 769 |       linear: 'linear',
 770 |       in: 'cubic-bezier(0.4, 0, 1, 1)',
 771 |       out: 'cubic-bezier(0, 0, 0.2, 1)',
 772 |       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
 773 |     },
 774 |     translate: (theme, { negative }) => ({
 775 |       ...theme('spacing'),
 776 |       ...negative(theme('spacing')),
 777 |       '1/2': '50%',
 778 |       '1/3': '33.333333%',
 779 |       '2/3': '66.666667%',
 780 |       '1/4': '25%',
 781 |       '2/4': '50%',
 782 |       '3/4': '75%',
 783 |       full: '100%',
 784 |       '-1/2': '-50%',
 785 |       '-1/3': '-33.333333%',
 786 |       '-2/3': '-66.666667%',
 787 |       '-1/4': '-25%',
 788 |       '-2/4': '-50%',
 789 |       '-3/4': '-75%',
 790 |       '-full': '-100%',
 791 |     }),
 792 |     width: (theme) => ({
 793 |       auto: 'auto',
 794 |       ...theme('spacing'),
 795 |       '1/2': '50%',
 796 |       '1/3': '33.333333%',
 797 |       '2/3': '66.666667%',
 798 |       '1/4': '25%',
 799 |       '2/4': '50%',
 800 |       '3/4': '75%',
 801 |       '1/5': '20%',
 802 |       '2/5': '40%',
 803 |       '3/5': '60%',
 804 |       '4/5': '80%',
 805 |       '1/6': '16.666667%',
 806 |       '2/6': '33.333333%',
 807 |       '3/6': '50%',
 808 |       '4/6': '66.666667%',
 809 |       '5/6': '83.333333%',
 810 |       '1/12': '8.333333%',
 811 |       '2/12': '16.666667%',
 812 |       '3/12': '25%',
 813 |       '4/12': '33.333333%',
 814 |       '5/12': '41.666667%',
 815 |       '6/12': '50%',
 816 |       '7/12': '58.333333%',
 817 |       '8/12': '66.666667%',
 818 |       '9/12': '75%',
 819 |       '10/12': '83.333333%',
 820 |       '11/12': '91.666667%',
 821 |       full: '100%',
 822 |       screen: '100vw',
 823 |       min: 'min-content',
 824 |       max: 'max-content',
 825 |     }),
 826 |     zIndex: {
 827 |       auto: 'auto',
 828 |       0: '0',
 829 |       10: '10',
 830 |       20: '20',
 831 |       30: '30',
 832 |       40: '40',
 833 |       50: '50',
 834 |     },
 835 |     gradients: (theme) => ({
 836 |       'primary-45': [
 837 |         '45deg',
 838 |         theme('colors.primary.700'),
 839 |         theme('colors.primary.300')
 840 |       ],
 841 |       'complementary-45': [
 842 |         '45deg',
 843 |         theme('colors.complementary.700'),
 844 |         theme('colors.complementary.300')
 845 |       ],
 846 |       'mixed-45': [
 847 |         '45deg',
 848 |         theme('colors.complementary.300'),
 849 |         theme('colors.primary.100')
 850 |       ]
 851 |     })
 852 |   },
 853 |   variantOrder: [
 854 |     'first',
 855 |     'last',
 856 |     'odd',
 857 |     'even',
 858 |     'visited',
 859 |     'checked',
 860 |     'group-hover',
 861 |     'group-focus',
 862 |     'focus-within',
 863 |     'hover',
 864 |     'focus',
 865 |     'focus-visible',
 866 |     'active',
 867 |     'disabled',
 868 |   ],
 869 |   variants: {
 870 |     accessibility: ['responsive', 'focus-within', 'focus'],
 871 |     alignContent: ['responsive'],
 872 |     alignItems: ['responsive'],
 873 |     alignSelf: ['responsive'],
 874 |     animation: ['responsive'],
 875 |     appearance: ['responsive'],
 876 |     backdropBlur: ['responsive'],
 877 |     backdropBrightness: ['responsive'],
 878 |     backdropContrast: ['responsive'],
 879 |     backdropDropShadow: ['responsive'],
 880 |     backdropFilter: ['responsive'],
 881 |     backdropGrayscale: ['responsive'],
 882 |     backdropHueRotate: ['responsive'],
 883 |     backdropInvert: ['responsive'],
 884 |     backdropSaturate: ['responsive'],
 885 |     backdropSepia: ['responsive'],
 886 |     backgroundAttachment: ['responsive'],
 887 |     backgroundBlendMode: ['responsive'],
 888 |     backgroundClip: ['responsive'],
 889 |     backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 890 |     backgroundImage: ['responsive'],
 891 |     backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 892 |     backgroundPosition: ['responsive'],
 893 |     backgroundRepeat: ['responsive'],
 894 |     backgroundSize: ['responsive'],
 895 |     blur: ['responsive'],
 896 |     borderCollapse: ['responsive'],
 897 |     borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 898 |     borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 899 |     borderRadius: ['responsive'],
 900 |     borderStyle: ['responsive'],
 901 |     borderWidth: ['responsive'],
 902 |     boxDecorationBreak: ['responsive'],
 903 |     boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
 904 |     boxSizing: ['responsive'],
 905 |     brightness: ['responsive'],
 906 |     clear: ['responsive'],
 907 |     container: ['responsive'],
 908 |     contrast: ['responsive'],
 909 |     cursor: ['responsive'],
 910 |     display: ['responsive'],
 911 |     divideColor: ['responsive', 'dark'],
 912 |     divideOpacity: ['responsive', 'dark'],
 913 |     divideStyle: ['responsive'],
 914 |     divideWidth: ['responsive'],
 915 |     dropShadow: ['responsive'],
 916 |     fill: ['responsive'],
 917 |     filter: ['responsive'],
 918 |     flex: ['responsive'],
 919 |     flexDirection: ['responsive'],
 920 |     flexGrow: ['responsive'],
 921 |     flexShrink: ['responsive'],
 922 |     flexWrap: ['responsive'],
 923 |     float: ['responsive'],
 924 |     fontFamily: ['responsive'],
 925 |     fontSize: ['responsive'],
 926 |     fontSmoothing: ['responsive'],
 927 |     fontStyle: ['responsive'],
 928 |     fontVariantNumeric: ['responsive'],
 929 |     fontWeight: ['responsive'],
 930 |     gap: ['responsive'],
 931 |     gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
 932 |     grayscale: ['responsive'],
 933 |     gridAutoColumns: ['responsive'],
 934 |     gridAutoFlow: ['responsive'],
 935 |     gridAutoRows: ['responsive'],
 936 |     gridColumn: ['responsive'],
 937 |     gridColumnEnd: ['responsive'],
 938 |     gridColumnStart: ['responsive'],
 939 |     gridRow: ['responsive'],
 940 |     gridRowEnd: ['responsive'],
 941 |     gridRowStart: ['responsive'],
 942 |     gridTemplateColumns: ['responsive'],
 943 |     gridTemplateRows: ['responsive'],
 944 |     height: ['responsive'],
 945 |     hueRotate: ['responsive'],
 946 |     inset: ['responsive'],
 947 |     invert: ['responsive'],
 948 |     isolation: ['responsive'],
 949 |     justifyContent: ['responsive'],
 950 |     justifyItems: ['responsive'],
 951 |     justifySelf: ['responsive'],
 952 |     letterSpacing: ['responsive'],
 953 |     lineHeight: ['responsive'],
 954 |     listStylePosition: ['responsive'],
 955 |     listStyleType: ['responsive'],
 956 |     margin: ['responsive'],
 957 |     maxHeight: ['responsive'],
 958 |     maxWidth: ['responsive'],
 959 |     minHeight: ['responsive'],
 960 |     minWidth: ['responsive'],
 961 |     mixBlendMode: ['responsive'],
 962 |     objectFit: ['responsive'],
 963 |     objectPosition: ['responsive'],
 964 |     opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
 965 |     order: ['responsive'],
 966 |     outline: ['responsive', 'focus-within', 'focus'],
 967 |     overflow: ['responsive'],
 968 |     overscrollBehavior: ['responsive'],
 969 |     padding: ['responsive'],
 970 |     placeContent: ['responsive'],
 971 |     placeItems: ['responsive'],
 972 |     placeSelf: ['responsive'],
 973 |     placeholderColor: ['responsive', 'dark', 'focus'],
 974 |     placeholderOpacity: ['responsive', 'dark', 'focus'],
 975 |     pointerEvents: ['responsive'],
 976 |     position: ['responsive'],
 977 |     resize: ['responsive'],
 978 |     ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
 979 |     ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
 980 |     ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
 981 |     ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
 982 |     ringWidth: ['responsive', 'focus-within', 'focus'],
 983 |     rotate: ['responsive', 'hover', 'focus'],
 984 |     saturate: ['responsive'],
 985 |     scale: ['responsive', 'hover', 'focus'],
 986 |     sepia: ['responsive'],
 987 |     skew: ['responsive', 'hover', 'focus'],
 988 |     space: ['responsive'],
 989 |     stroke: ['responsive'],
 990 |     strokeWidth: ['responsive'],
 991 |     tableLayout: ['responsive'],
 992 |     textAlign: ['responsive'],
 993 |     textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 994 |     textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
 995 |     textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
 996 |     textOverflow: ['responsive'],
 997 |     textTransform: ['responsive'],
 998 |     transform: ['responsive'],
 999 |     transformOrigin: ['responsive'],
1000 |     transitionDelay: ['responsive'],
1001 |     transitionDuration: ['responsive'],
1002 |     transitionProperty: ['responsive'],
1003 |     transitionTimingFunction: ['responsive'],
1004 |     translate: ['responsive', 'hover', 'focus'],
1005 |     userSelect: ['responsive'],
1006 |     verticalAlign: ['responsive'],
1007 |     visibility: ['responsive'],
1008 |     whitespace: ['responsive'],
1009 |     width: ['responsive'],
1010 |     wordBreak: ['responsive'],
1011 |     zIndex: ['responsive', 'focus-within', 'focus'],
1012 |   },
1013 |   plugins: [
1014 |     require('tailwindcss-plugins/gradients'),
1015 |     plugin(function({ addUtilities, addComponents, e, prefix, config }) {
1016 |       const newUtilities = {
1017 |         '.rotate-y-0': {
1018 |           transform: 'rotateY(0deg)'
1019 |         },
1020 |         '.rotate-y-180': {
1021 |           transform: 'rotateY(180deg)'
1022 |         },
1023 |         '.transform-style-3d': {
1024 |           transformStyle: 'preserve-3d'
1025 |         },
1026 |         '.backface-hidden': {
1027 |           backfaceVisibility: 'hidden'
1028 |         },
1029 |         '.perspective': {
1030 |           perspective: '1000px'
1031 |         }
1032 |       }
1033 | 
1034 |       addUtilities(newUtilities, ['group-hover'])
1035 |     })
1036 |   ],
1037 | }
1038 | 


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