├── .browserslistrc
├── src
    ├── bus.js
    ├── assets
    │   ├── tailwind.css
    │   └── logo.png
    ├── hooks
    │   ├── bus.js
    │   ├── modal.js
    │   └── store.js
    ├── main.js
    ├── services
    │   ├── index.js
    │   └── github.js
    ├── components
    │   ├── MicroCard.vue
    │   ├── CustomHeader.vue
    │   └── ModalUser.vue
    └── App.vue
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── .editorconfig
├── postcss.config.js
├── .gitignore
├── README.md
├── .eslintrc.js
├── package.json
└── tailwind.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/src/bus.js:
--------------------------------------------------------------------------------
1 | import Emitter from 'tiny-emitter'
2 | 
3 | export default new Emitter()
4 | 


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/estado-global-vue3-workshop-rocketseat/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/estado-global-vue3-workshop-rocketseat/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/hooks/bus.js:
--------------------------------------------------------------------------------
1 | import Emitter from 'tiny-emitter'
2 | 
3 | const bus = new Emitter()
4 | 
5 | export default () => {
6 |   return bus
7 | }
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import './assets/tailwind.css'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const autoprefixer = require('autoprefixer')
 2 | const tailwindcss = require('tailwindcss')
 3 | 
 4 | module.exports = {
 5 |   plugins: [
 6 |     tailwindcss('./tailwind.config.js'),
 7 |     autoprefixer()
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/services/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import GithubService from './github'
 3 | 
 4 | const HTTPClient = axios.create({
 5 |   baseURL: 'https://api.github.com'
 6 | })
 7 | 
 8 | export default {
 9 |   github: GithubService(HTTPClient)
10 | }
11 | 


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


--------------------------------------------------------------------------------
/src/hooks/modal.js:
--------------------------------------------------------------------------------
 1 | import bus from '../bus'
 2 | 
 3 | function useModal () {
 4 |   const open = (payload = {}) => {
 5 |     bus.emit('modal:toggle', { status: true, ...payload })
 6 |   }
 7 |   const close = (payload = {}) => {
 8 |     bus.emit('modal:toggle', { status: false, ...payload })
 9 |   }
10 | 
11 |   return { open, close }
12 | }
13 | 
14 | export default useModal
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Estado global no Vue.js 3
 2 | 
 3 | ### Project setup
 4 | ```
 5 | npm install
 6 | 
 7 | # Compiles and hot-reloads for development
 8 | npm run serve
 9 | 
10 | # Compiles and minifies for production
11 | npm run build
12 | 
13 | # Lints and fixes files
14 | npm run lint
15 | ```
16 | 
17 | ### Customize configuration
18 | See [Configuration Reference](https://cli.vuejs.org/config/).
19 | 


--------------------------------------------------------------------------------
/src/hooks/store.js:
--------------------------------------------------------------------------------
 1 | import { reactive, readonly } from 'vue'
 2 | 
 3 | const state = reactive({
 4 |   isActiveGlobalLoading: false,
 5 |   users: []
 6 | })
 7 | 
 8 | export default function useStore () {
 9 |   return readonly(state)
10 | }
11 | 
12 | export function setGlobalLoading (status) {
13 |   state.isActiveGlobalLoading = status
14 | }
15 | 
16 | export function setUsers (users) {
17 |   state.users = users
18 | }
19 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/MicroCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col items-center justify-center">
 3 |     <div>
 4 |       <img
 5 |         :src="photoUrl"
 6 |         class="w-32 h-32 rounded-full select-none"
 7 |         alt="">
 8 |     </div>
 9 |     <p class="mt-3 text-xl font-bold text-gray-500 font-paragrapher">@{{ username }}</p>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     username: { type: String, required: true },
17 |     photoUrl: { type: String, required: true }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/services/github.js:
--------------------------------------------------------------------------------
 1 | export default httpClient => ({
 2 |   searchUsers: async ({ q = '' } = {}) => {
 3 |     try {
 4 |       const response = await httpClient.get('/search/users', { params: { q } })
 5 |       return response.data
 6 |     } catch (_) {
 7 |       throw new Error('Github search users error')
 8 |     }
 9 |   },
10 |   getUserByUsername: async ({ username = '' } = {}) => {
11 |     try {
12 |       const response = await httpClient.get(`/users/${username}`)
13 |       return response.data
14 |     } catch (_) {
15 |       throw new Error('Github get user by username error')
16 |     }
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <title>
10 |     👻 Estado global no Vue.js 3
11 |   </title>
12 | </head>
13 | 
14 | <body>
15 |   <noscript>
16 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
17 |       Please enable it to continue.</strong>
18 |   </noscript>
19 |   <div id="app"></div>
20 |   <!-- built files will be auto injected -->
21 | </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "estado-global-vue3-rocketseat-workshop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "autoprefixer": "^9.8.6",
12 |     "axios": "^0.21.0",
13 |     "core-js": "^3.6.5",
14 |     "lodash.debounce": "^4.0.8",
15 |     "postcss": "^7.0.35",
16 |     "postcss-loader": "^4.0.3",
17 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
18 |     "tiny-emitter": "^2.1.0",
19 |     "vue": "^3.0.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/compiler-sfc": "^3.0.0",
26 |     "@vue/eslint-config-standard": "^5.1.2",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-import": "^2.20.2",
30 |     "eslint-plugin-node": "^11.1.0",
31 |     "eslint-plugin-promise": "^4.2.1",
32 |     "eslint-plugin-standard": "^4.0.0",
33 |     "eslint-plugin-vue": "^7.0.0-0",
34 |     "lint-staged": "^9.5.0"
35 |   },
36 |   "_id": "estado-global-vue3-rocketseat-workshop@0.1.0",
37 |   "gitHooks": {
38 |     "pre-commit": "lint-staged"
39 |   },
40 |   "lint-staged": {
41 |     "*.{js,jsx,vue}": [
42 |       "vue-cli-service lint",
43 |       "git add"
44 |     ]
45 |   },
46 |   "readme": "ERROR: No README data found!"
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/CustomHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col items-center justify-center w-full bg-gray-100 h-72">
 3 |     <h1 class="text-5xl font-black text-gray-700 text-purple-500">Estado global no Vue.js 3</h1>
 4 |     <p class="mt-3 text-2xl text-gray-300 text-gray-700 font-paragrapher">Já era simples, agora ficou mais 😻</p>
 5 |     <div class="flex flex-col w-3/4 xl:w-1/4">
 6 |       <input
 7 |         @keyup.enter="() => handleChange()"
 8 |         type="text"
 9 |         class="w-full px-2 py-2 mt-7 rounded-md"
10 |         placeholder="Ex: Igor Halfeld" v-model="state.inputValue">
11 |       <i class="text-gray-400">{{ countLabel }}</i>
12 |       <i class="text-gray-400" v-if="store.users.length">Mostrando {{ store.users.length }}</i>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import { computed, reactive } from 'vue'
19 | import debounce from 'lodash.debounce'
20 | import useStore from '../hooks/store'
21 | 
22 | export default {
23 |   props: {
24 |     count: { type: [String, Number], default: 3 }
25 |   },
26 |   emits: ['change'],
27 |   setup (props, { emit }) {
28 |     const store = useStore()
29 |     const countLabel = computed(() => {
30 |       if (props.count === 0) return 'Nenhum item encontrato'
31 |       if (props.count === 1) return `${props.count} item encontrato`
32 | 
33 |       return `${props.count} items encontratos`
34 |     })
35 | 
36 |     const state = reactive({
37 |       inputValue: ''
38 |     })
39 | 
40 |     const handleChange = debounce(() => {
41 |       emit('change', state.inputValue)
42 |     }, 500)
43 | 
44 |     return {
45 |       state,
46 |       store,
47 |       countLabel,
48 |       handleChange
49 |     }
50 |   }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <modal-user></modal-user>
  3 | 
  4 |   <custom-header
  5 |     @change="handleSearch"
  6 |     :count="state.count"
  7 |   />
  8 | 
  9 |   <div class="flex justify-center">
 10 |     <div class="flex flex-wrap justify-center max-w-5xl px-5 py-10">
 11 |       <p
 12 |         v-if="!store.users.length && !state.hasError && !store.isActiveGlobalLoading"
 13 |         class="text-xl font-semibold text-center text-gray-700"
 14 |       >
 15 |         Faça aquela busca braba aí 👆🏻
 16 |       </p>
 17 | 
 18 |       <p
 19 |         v-if="state.hasError"
 20 |         class="flex flex-col items-center text-xl font-semibold text-center text-gray-700"
 21 |       >
 22 |         <span class="mb-3 text-6xl animate-spin">
 23 |           🙀
 24 |         </span>
 25 |         Oh no! deu ruim..
 26 |       </p>
 27 | 
 28 |       <div class="flex flex-col items-center text-xl font-semibold" v-if="store.isActiveGlobalLoading">
 29 |         <span class="mb-3 text-6xl animate-spin">
 30 |           🦄
 31 |         </span>
 32 |         Fazendo uma mágica aqui...
 33 |       </div>
 34 | 
 35 |       <micro-card
 36 |         v-for="(user, index) in store.users"
 37 |         :key="index"
 38 |         :username="user.username"
 39 |         :photo-url="user.photoUrl"
 40 |         @click="() => handleCardClick(user)"
 41 |         class="mb-10 mr-10"
 42 |       />
 43 |     </div>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | import { reactive, onErrorCaptured } from 'vue'
 49 | import CustomHeader from './components/CustomHeader'
 50 | import MicroCard from './components/MicroCard'
 51 | import ModalUser from './components/ModalUser'
 52 | import services from './services'
 53 | import useModal from './hooks/modal'
 54 | import useStore, { setGlobalLoading, setUsers } from './hooks/store'
 55 | 
 56 | export default {
 57 |   name: 'App',
 58 |   components: { CustomHeader, MicroCard, ModalUser },
 59 |   setup () {
 60 |     const modal = useModal()
 61 |     const store = useStore()
 62 |     const state = reactive({
 63 |       count: 0,
 64 |       hasError: false
 65 |     })
 66 | 
 67 |     onErrorCaptured((error) => {
 68 |       state.hasError = !!error
 69 |       setUsers([])
 70 |       setGlobalLoading(false)
 71 |     })
 72 | 
 73 |     async function handleSearch (q) {
 74 |       setGlobalLoading(true)
 75 |       setUsers([])
 76 |       state.hasError = false
 77 |       console.log('global loading', store.isActiveGlobalLoading)
 78 | 
 79 |       const response = await services.github.searchUsers({ q })
 80 |       state.count = response.total_count
 81 |       const users = response.items.map(item => ({ username: item.login, photoUrl: item.avatar_url }))
 82 |       setUsers(users)
 83 | 
 84 |       setGlobalLoading(false)
 85 | 
 86 |       console.log('global loading', store.isActiveGlobalLoading)
 87 |     }
 88 | 
 89 |     function handleCardClick (user) {
 90 |       modal.open(user)
 91 |     }
 92 | 
 93 |     return {
 94 |       state,
 95 |       store,
 96 |       handleSearch,
 97 |       handleCardClick
 98 |     }
 99 |   }
100 | }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/src/components/ModalUser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="state.isActive"
  4 |     class="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black bg-opacity-50"
  5 |     @click="close"
  6 |   >
  7 |     <div
  8 |       class="fixed w-64 max-w-2xl mx-10"
  9 |       @click.stop
 10 |     >
 11 |       <div class="flex flex-col overflow-hidden bg-white rounded-lg">
 12 |         <div
 13 |           :style="{
 14 |             backgroundImage: `url(${state.user.photoUrl})`
 15 |           }"
 16 | 
 17 |           class="relative flex w-full h-48 bg-center bg-cover"
 18 |         />
 19 | 
 20 |         <div class="flex flex-col p-4 bg-white">
 21 |           <p
 22 |             v-if="state.isLoading"
 23 |             class="text-sm font-bold text-gray-700">
 24 |             Carregando...
 25 |           </p>
 26 |           <div class="">
 27 |             <h1 class="text-lg font-black text-gray-800">
 28 |               {{ state.user.name }} (@{{ state.user.username }})
 29 |             </h1>
 30 |             <p class="text-sm font-bold text-gray-700">
 31 |               {{ state.user.company }}
 32 |             </p>
 33 |             <div class="max-w-xl mt-5 font-semibold text-gray-600">
 34 |               {{ state.user.bio }}
 35 |             </div>
 36 |           </div>
 37 |           <div class="flex justify-end mt-10">
 38 |             <a :href="state.githubUrl" target="_blank" class="mr-5 font-medium text-gray-400 focus:outline-none">
 39 |               Abrir perfil
 40 |             </a>
 41 |             <button class="font-medium focus:outline-none" @click="close">
 42 |               Ok 🚀
 43 |             </button>
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | import { reactive, computed, onMounted, onBeforeUnmount } from 'vue'
 53 | import bus from '../bus'
 54 | import services from '../services'
 55 | 
 56 | export default {
 57 |   setup (props) {
 58 |     const state = reactive({
 59 |       isActive: false,
 60 |       isLoading: false,
 61 |       user: {
 62 |         name: '',
 63 |         username: '',
 64 |         photoUrl: '',
 65 |         bio: '',
 66 |         company: ''
 67 |       }
 68 |     })
 69 | 
 70 |     state.githubUrl = computed(() => `https://github.com/${state.user.username}`)
 71 | 
 72 |     function close () {
 73 |       state.isActive = false
 74 |     }
 75 | 
 76 |     async function handleModalToggle (payload) {
 77 |       state.isLoading = true
 78 |       state.isActive = payload.status
 79 |       state.user.username = payload.username
 80 |       state.user.photoUrl = payload.photoUrl
 81 | 
 82 |       const response = await services.github.getUserByUsername({ username: payload.username })
 83 | 
 84 |       state.user.name = response.name ?? 'Sem nome'
 85 |       state.user.bio = response.bio ?? 'Sem bio'
 86 |       state.user.company = response.company ?? 'Sem empresa'
 87 | 
 88 |       state.isLoading = false
 89 |     }
 90 | 
 91 |     onMounted(() => {
 92 |       bus.on('modal:toggle', handleModalToggle)
 93 |     })
 94 | 
 95 |     onBeforeUnmount(() => {
 96 |       bus.off('modal:toggle', handleModalToggle)
 97 |     })
 98 | 
 99 |     return {
100 |       state,
101 |       close
102 |     }
103 |   }
104 | }
105 | </script>
106 | 


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


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