├── postcss.config.js ├── ISSUE_TEMPLATE.md ├── CHANGELOG.md ├── genezio.yaml ├── package.json ├── src └── styles.css ├── LICENSE ├── .gihub └── workflows │ └── main.yml ├── README.md └── tailwind.config.js /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: { config: "./tailwindcss-config.js" }, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.0.5] 2022-08-05 4 | ### Bug Fixing 5 | - fix sidenav color plugin 6 | - fix chips' padding 7 | 8 | ## [1.0.4] 2022-08-04 9 | ### Bug Fixing 10 | - refactor custom classes 11 | - add pro button 12 | - rename styles file 13 | - update documentation 14 | 15 | ## [1.0.3] 2022-06-24 16 | ### Bug Fixing 17 | - update script imports 18 | 19 | ## [1.0.2] 2022-06-14 20 | ### Bug Fixing 21 | - fix documentation link 22 | 23 | ## [1.0.1] 2022-06-10 24 | ### Bug Fixing 25 | - update github buttons link 26 | 27 | ## [1.0.0] 2022-06-07 28 | ### Original Release -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: soft-ui-dashboard-tailwind 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | yamlVersion: 2 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "soft-ui-dashboard-tailwind", 3 | "version": "1.0.5", 4 | "description": "", 5 | "scripts": { 6 | "build": "tailwindcss build -i src/styles.css -o build/assets/css/soft-ui-dashboard-tailwind.css" 7 | }, 8 | "devDependencies": { 9 | "autoprefixer": "^10.4.2", 10 | "postcss": "^8.4.6", 11 | "postcss-cli": "^9.1.0", 12 | "tailwindcss": "^3.0.19" 13 | }, 14 | "dependencies": { 15 | "cli": "^1.0.1", 16 | "highlight.js": "^11.4.0", 17 | "tailwindcss-transforms": "^2.2.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Soft UI Dashboard Tailwind - v1.0.5 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-tailwind 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (site.license) 10 | 11 | * Coded by www.creative-tim.com 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | @tailwind base; 19 | @tailwind components; 20 | @tailwind utilities; 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim 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 | -------------------------------------------------------------------------------- /.gihub/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/soft-ui-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Soft UI Dashboard Tailwind](http://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/dashboard.html?ref=readme-sudt) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/soft-ui-dashboard-tailwind&text=Check%20Soft%20UI%20Dashboard%20Tailwind%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#softdesign%20#html%20https://www.creative-tim.com/product/soft-ui-dashboard-tailwind) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/FhCJCaHdQa) 2 | 3 | ![version](https://img.shields.io/badge/version-1.0.5-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/soft-ui-dashboard-tailwind.svg)](https://github.com/creativetimofficial/soft-ui-dashboard-tailwind/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/soft-ui-dashboard-tailwind.svg)](https://github.com/creativetimofficial/soft-ui-dashboard-tailwind/issues?q=is%3Aissue+is%3Aclosed) 4 | 5 | ![Image](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/soft-ui-dashboard-tailwind.jpg) 6 | 7 | Most complex and innovative Dashboard Made by [Creative Tim](https://creative-tim.com/). Check our latest Free TailwindCSS Dashboard. 8 | 9 | Designed for those who like bold elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Soft UI Dashboard Tailwind is ready to help you create stunning websites and webapps. 10 | 11 | We created many examples for pages like Sign In, Profile and so on. Just choose between a Basic Design, an illustration or a cover and you are good to go! 12 | 13 | **Fully Coded Elements** 14 | 15 | Soft UI Dashboard Tailwind is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files and classes. 16 | 17 | You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. 18 | This Free TailwindCSS Dashboard is coming with prebuilt design blocks, so the development process is seamless, 19 | switching from our pages to the real website is very easy to be done. 20 | 21 | View [all components here](https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/?ref=readme-sudt). 22 | 23 | **Documentation built by Developers** 24 | 25 | Each element is well presented in a very complex documentation. 26 | You can read more about the documentation here. 27 | 28 | **Example Pages** 29 | 30 | If you want to get inspiration or just show something directly to your clients, 31 | you can jump start your development with our pre-built example pages. You will be able 32 | to quickly set up the basic structure for your web project. 33 | View example pages here. 34 | 35 | **HELPFUL LINKS** 36 | 37 | - View Github Repository 38 | 39 | - Check FAQ Page 40 | 41 | #### Special thanks 42 | During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source: 43 | - [TailwindCSS](https://tailwindcss.com/)- Open source front end framework 44 | - [Popper.js](https://popper.js.org/) - Kickass library used to manage poppers 45 | - [Nepcha Analytics](https://nepcha.com/?ref=readme) for the analytics tool. Nepcha is already integrated with Soft UI Dashboard Tailwind. You can use it to gain insights into your sources of traffic. 46 | 47 | Let us know your thoughts below. And good luck with development! 48 | 49 | ## Table of Contents 50 | 51 | * [Versions](#versions) 52 | * [Demo](#demo) 53 | * [Quick Start](#quick-start) 54 | * [Deploy](#deploy) 55 | * [Documentation](#documentation) 56 | * [File Structure](#file-structure) 57 | * [Browser Support](#browser-support) 58 | * [Resources](#resources) 59 | * [Reporting Issues](#reporting-issues) 60 | * [Technical Support or Questions](#technical-support-or-questions) 61 | * [Licensing](#licensing) 62 | * [Useful Links](#useful-links) 63 | 64 | ## Versions 65 | 66 | [](https://www.creative-tim.com/product/soft-ui-dashboard-tailwind?ref=readme-sudt) 67 | 68 | | HTML | 69 | | --- | 70 | | [![Soft UI Dashboard Tailwind HTML](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/soft-ui-dashboard-tailwind.jpg)](http://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/dashboard.html?ref=readme-sudt) 71 | 72 | ## Demo 73 | 74 | - [Profile page](http://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/profile.html?ref=readme-sudt) 75 | - [Sign in page](http://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/sign-in.html?ref=readme-sudt) 76 | - [Sign up page](https://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/sign-up.html?ref=readme-sudt) 77 | 78 | [View More](https://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/dashboard.html?ref=readme-sudt). 79 | 80 | ## Quick start 81 | 82 | Quick start options: 83 | 84 | - Download from [Creative Tim](https://www.creative-tim.com/product/soft-ui-dashboard-tailwind?ref=readme-sudt). 85 | 86 | ## Deploy 87 | 88 | :rocket: You can deploy your own version of the template to Genezio with one click: 89 | 90 | [![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/soft-ui-dashboard-tailwind&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head) 91 | 92 | ## Terminal Commands 93 | 94 | 1. Download and Install NodeJs from [NodeJs Official Page](https://nodejs.org/en/download/). 95 | 2. Navigate to the root / directory and run npm install to install our local dependencies. 96 | 97 | ## Documentation 98 | The documentation for the Soft UI Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/?ref=readme-sudt). 99 | 100 | ### What's included 101 | 102 | Within the download you'll find the following directories and files: 103 | 104 | ``` 105 | soft-ui-dashboard-tailwind 106 | ├── build 107 | │   ├── assets 108 | │   │   ├── css 109 | │   │   │   ├── soft-ui-dashboard-tailwind.css 110 | │   │   │   ├── soft-ui-dashboard-tailwind.min.css 111 | │   │   ├── fonts 112 | │   │   ├── img 113 | │   │   └── js 114 | │   │   ├── plugins 115 | │   │   ├── soft-ui-dashboard-tailwind.js 116 | │   │   └── soft-ui-dashboard-tailwind.min.js 117 | │   ├── docs 118 | │   │   └── documentation.html 119 | │   ├── index.html 120 | │   └── pages 121 | ├── package.json 122 | ├── src 123 | │   └── styles.css 124 | └── tailwind.config.js 125 | 126 | ``` 127 | 128 | ## Browser Support 129 | 130 | At present, we officially aim to support the last two versions of the following browsers: 131 | 132 | 133 | 134 | ## Resources 135 | - [Live Preview](https://demos.creative-tim.com/soft-ui-dashboard-tailwind/pages/dashboard.html?ref=readme-sudt) 136 | - [Download Page](https://www.creative-tim.com/product/soft-ui-dashboard-tailwind?ref=readme-sudt) 137 | - Documentation is [here](https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/?ref=readme-sudt) 138 | - [License Agreement](https://www.creative-tim.com/license?ref=readme-sudt) 139 | - [Support](https://www.creative-tim.com/contact-us?ref=readme-sudt) 140 | - Issues: [Github Issues Page](https://github.com/creativetimofficial/soft-ui-dashboard-tailwind/issues) 141 | - [Nepcha Analytics](https://nepcha.com/?ref=readme) - Analytics tool for your website 142 | 143 | ## Reporting Issues 144 | We use GitHub Issues as the official bug tracker for the Soft UI Dashboard Tailwind. Here are some advices for our users that want to report an issue: 145 | 146 | 1. Make sure that you are using the latest version of the Soft UI Dashboard. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/soft-ui-dashboard-tailwind?ref=readme-sudt). 147 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 148 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 149 | 150 | ## Technical Support or Questions 151 | 152 | If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-sudt) instead of opening an issue. 153 | 154 | ## Licensing 155 | 156 | - Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-sudt) 157 | - Creative Tim [license](https://www.creative-tim.com/license?ref=readme-sudt) 158 | 159 | ## Useful Links 160 | 161 | - [More products](https://www.creative-tim.com/templates?ref=readme-sudt) from Creative Tim 162 | 163 | - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) 164 | 165 | - [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-sudt) from Creative Tim 166 | 167 | - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-sudt) (earn money) 168 | 169 | ##### Social Media 170 | 171 | Twitter: 172 | 173 | Facebook: 174 | 175 | Dribbble: 176 | 177 | Instagram: 178 | 179 | TikTok: 180 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const plugin = require("tailwindcss/plugin"); 2 | 3 | module.exports = { 4 | mode: "jit", 5 | content: ["./build/**/*.{html,js}"], 6 | presets: [], 7 | darkMode: "class", 8 | theme: { 9 | screens: { 10 | sm: "576px", 11 | "sm-max": { max: "576px" }, 12 | md: "768px", 13 | "md-max": { max: "768px" }, 14 | lg: "992px", 15 | "lg-max": { max: "992px" }, 16 | xl: "1200px", 17 | "xl-max": { max: "1200px" }, 18 | "2xl": "1320px", 19 | "2xl-max": { max: "1320px" }, 20 | }, 21 | colors: ({ colors }) => ({ 22 | inherit: colors.inherit, 23 | current: colors.current, 24 | transparent: colors.transparent, 25 | black: colors.black, 26 | white: colors.white, 27 | 28 | slate: { 29 | DEFAULT: colors.slate, 30 | 50: "#f8fafc", 31 | 100: "#dee2e6", 32 | 200: "#cbd3da", 33 | 300: "#a8b8d8", 34 | 400: "#8392ab", 35 | 500: "#67748e", 36 | 600: "#627594", 37 | 700: "#344767", 38 | 800: "#3a416f", 39 | 900: "#0f172a", 40 | }, 41 | 42 | gray: { 43 | DEFAULT: colors.gray, 44 | 50: "#f8f9fa", 45 | 100: "#ebeff4", 46 | 200: "#e9ecef", 47 | 300: "#d2d6da", 48 | 400: "#ced4da", 49 | 500: "#adb5bd", 50 | 600: "#6c757d", 51 | 700: "#495057", 52 | 800: "#252f40", 53 | 900: "#141727", 54 | }, 55 | 56 | zinc: { 57 | DEFAULT: colors.zinc, 58 | 50: "#fafafa", 59 | 100: "#f4f4f5", 60 | 200: "#e4e4e7", 61 | 300: "#d4d4d8", 62 | 400: "#a1a1aa", 63 | 500: "#71717a", 64 | 600: "#52525b", 65 | 700: "#3f3f46", 66 | 800: "#27272a", 67 | 900: "#18181b", 68 | }, 69 | 70 | neutral: { 71 | DEFAULT: colors.neutral, 72 | 50: "#fafafa", 73 | 100: "#f5f5f5", 74 | 200: "#e5e5e5", 75 | 300: "#d4d4d4", 76 | 400: "#a3a3a3", 77 | 500: "#737373", 78 | 600: "#525252", 79 | 700: "#404040", 80 | 800: "#262626", 81 | 900: "#111111", 82 | }, 83 | 84 | stone: { 85 | DEFAULT: colors.stone, 86 | 50: "#fafaf9", 87 | 100: "#f5f5f4", 88 | 200: "#e7e5e4", 89 | 300: "#d6d3d1", 90 | 400: "#a8a29e", 91 | 500: "#78716c", 92 | 600: "#57534e", 93 | 700: "#44403c", 94 | 800: "#292524", 95 | 900: "#1c1917", 96 | }, 97 | 98 | red: { 99 | DEFAULT: colors.red, 100 | 50: "#fef2f2", 101 | 100: "#fee2e2", 102 | 200: "#fecaca", 103 | 300: "#fca5a5", 104 | 400: "#f87171", 105 | 500: "#f53939", 106 | 600: "#ea0606", 107 | 700: "#b91c1c", 108 | 800: "#991b1b", 109 | 900: "#7f1d1d", 110 | }, 111 | 112 | orange: { 113 | DEFAULT: colors.orange, 114 | 50: "#fff7ed", 115 | 100: "#ffedd5", 116 | 200: "#fed7aa", 117 | 300: "#fdba74", 118 | 400: "#fb923c", 119 | 500: "#f97316", 120 | 600: "#ea580c", 121 | 700: "#c2410c", 122 | 800: "#9a3412", 123 | 900: "#7c2d12", 124 | }, 125 | 126 | amber: { 127 | DEFAULT: colors.amber, 128 | 50: "#fffbeb", 129 | 100: "#fef3c7", 130 | 200: "#fde68a", 131 | 300: "#fcd34d", 132 | 400: "#fbbf24", 133 | 500: "#f59e0b", 134 | 600: "#d97706", 135 | 700: "#b45309", 136 | 800: "#92400e", 137 | 900: "#78350f", 138 | }, 139 | 140 | yellow: { 141 | DEFAULT: colors.yellow, 142 | 50: "#fefce8", 143 | 100: "#fef9c3", 144 | 200: "#fef08a", 145 | 300: "#fde047", 146 | 400: "#fbcf33", 147 | 500: "#eab308", 148 | 600: "#ca8a04", 149 | 700: "#a16207", 150 | 800: "#854d0e", 151 | 900: "#713f12", 152 | }, 153 | 154 | lime: { 155 | DEFAULT: colors.lime, 156 | 50: "#f7fee7", 157 | 100: "#ecfccb", 158 | 200: "#d9f99d", 159 | 300: "#bef264", 160 | 400: "#98ec2d", 161 | 500: "#82d616", 162 | 600: "#65a30d", 163 | 700: "#4d7c0f", 164 | 800: "#3f6212", 165 | 900: "#365314", 166 | }, 167 | 168 | green: { 169 | DEFAULT: colors.green, 170 | 50: "#f0fdf4", 171 | 100: "#dcfce7", 172 | 200: "#bbf7d0", 173 | 300: "#86efac", 174 | 400: "#4ade80", 175 | 500: "#22c55e", 176 | 600: "#17ad37", 177 | 700: "#15803d", 178 | 800: "#166534", 179 | 900: "#14532d", 180 | }, 181 | 182 | emerald: { 183 | DEFAULT: colors.emerald, 184 | 50: "#ecfdf5", 185 | 100: "#d1fae5", 186 | 200: "#a7f3d0", 187 | 300: "#6ee7b7", 188 | 400: "#34d399", 189 | 500: "#10b981", 190 | 600: "#059669", 191 | 700: "#047857", 192 | 800: "#065f46", 193 | 900: "#064e3b", 194 | }, 195 | 196 | teal: { 197 | DEFAULT: colors.teal, 198 | 50: "#f0fdfa", 199 | 100: "#ccfbf1", 200 | 200: "#99f6e4", 201 | 300: "#5eead4", 202 | 400: "#2dd4bf", 203 | 500: "#14b8a6", 204 | 600: "#0d9488", 205 | 700: "#0f766e", 206 | 800: "#115e59", 207 | 900: "#134e4a", 208 | }, 209 | 210 | cyan: { 211 | DEFAULT: colors.cyan, 212 | 50: "#ecfeff", 213 | 100: "#cffafe", 214 | 200: "#a5f3fc", 215 | 300: "#67e8f9", 216 | 400: "#21d4fd", 217 | 500: "#17c1e8", 218 | 600: "#0891b2", 219 | 700: "#0e7490", 220 | 800: "#155e75", 221 | 900: "#164e63", 222 | }, 223 | 224 | sky: { 225 | DEFAULT: colors.sky, 226 | 50: "#f0f9ff", 227 | 100: "#e0f2fe", 228 | 200: "#bae6fd", 229 | 300: "#7dd3fc", 230 | 400: "#38bdf8", 231 | 500: "#0ea5e9", 232 | 600: "#3ea1ec", 233 | 700: "#0369a1", 234 | 800: "#075985", 235 | 900: "#0e456d", 236 | }, 237 | 238 | blue: { 239 | DEFAULT: colors.blue, 240 | 50: "#eff6ff", 241 | 100: "#dbeafe", 242 | 200: "#bfdbfe", 243 | 300: "#93c5fd", 244 | 400: "#60a5fa", 245 | 500: "#3b82f6", 246 | 600: "#2152ff", 247 | 700: "#1d4ed8", 248 | 800: "#344e86", 249 | 900: "#00007d", 250 | }, 251 | 252 | indigo: { 253 | DEFAULT: colors.indigo, 254 | 50: "#eef2ff", 255 | 100: "#e0e7ff", 256 | 200: "#c7d2fe", 257 | 300: "#a5b4fc", 258 | 400: "#818cf8", 259 | 500: "#6366f1", 260 | 600: "#4f46e5", 261 | 700: "#4338ca", 262 | 800: "#3730a3", 263 | 900: "#312e81", 264 | }, 265 | 266 | violet: { 267 | DEFAULT: colors.violet, 268 | 50: "#f5f3ff", 269 | 100: "#ede9fe", 270 | 200: "#ddd6fe", 271 | 300: "#c4b5fd", 272 | 400: "#a78bfa", 273 | 500: "#8b5cf6", 274 | 600: "#7c3aed", 275 | 700: "#6d28d9", 276 | 800: "#5b21b6", 277 | 900: "#4c1d95", 278 | }, 279 | 280 | purple: { 281 | DEFAULT: colors.purple, 282 | 50: "#faf5ff", 283 | 100: "#f3e8ff", 284 | 200: "#e9d5ff", 285 | 300: "#d8b4fe", 286 | 400: "#c084fc", 287 | 500: "#a855f7", 288 | 600: "#9333ea", 289 | 700: "#7928ca", 290 | 800: "#6b21a8", 291 | 900: "#581c87", 292 | }, 293 | 294 | fuchsia: { 295 | DEFAULT: colors.fuchsia, 296 | 50: "#fdf4ff", 297 | 100: "#fae8ff", 298 | 200: "#f5d0fe", 299 | 300: "#e293d3", 300 | 400: "#e879f9", 301 | 500: "#cb0c9f", 302 | 600: "#c026d3", 303 | 700: "#a21caf", 304 | 800: "#830866", 305 | 900: "#701a75", 306 | }, 307 | 308 | pink: { 309 | DEFAULT: colors.pink, 310 | 50: "#fdf2f8", 311 | 100: "#fce7f3", 312 | 200: "#fbcfe8", 313 | 300: "#f9a8d4", 314 | 400: "#f472b6", 315 | 500: "#ff0080", 316 | 600: "#db2777", 317 | 700: "#be185d", 318 | 800: "#9d174d", 319 | 900: "#831843", 320 | }, 321 | 322 | rose: { 323 | DEFAULT: colors.rose, 324 | 50: "#fff1f2", 325 | 100: "#ffe4e6", 326 | 200: "#fecdd3", 327 | 300: "#fda4af", 328 | 400: "#ff667c", 329 | 500: "#f43f5e", 330 | 600: "#e11d48", 331 | 700: "#be123c", 332 | 800: "#9f1239", 333 | 900: "#881337", 334 | }, 335 | }), 336 | columns: { 337 | auto: "auto", 338 | 1: "1", 339 | 2: "2", 340 | 3: "3", 341 | 4: "4", 342 | 5: "5", 343 | 6: "6", 344 | 7: "7", 345 | 8: "8", 346 | 9: "9", 347 | 10: "10", 348 | 11: "11", 349 | 12: "12", 350 | "3xs": "16rem", 351 | "2xs": "18rem", 352 | xs: "20rem", 353 | sm: "24rem", 354 | md: "28rem", 355 | lg: "32rem", 356 | xl: "36rem", 357 | "2xl": "42rem", 358 | "3xl": "48rem", 359 | "4xl": "56rem", 360 | "5xl": "64rem", 361 | "6xl": "72rem", 362 | "7xl": "80rem", 363 | }, 364 | spacing: { 365 | px: "1px", 366 | 0: "0px", 367 | 0.38: "0.095rem", 368 | 0.5: "0.125rem", 369 | 0.54: "0.135rem", 370 | 0.75: "0.1875rem", 371 | 1: "0.25rem", 372 | 1.2: "0.3rem", 373 | 1.25: "0.3125rem", 374 | 1.4: "0.35rem", 375 | 1.5: "0.375rem", 376 | 1.6: "0.4rem", 377 | 1.75: "0.4375rem", 378 | 1.8: "0.45rem", 379 | 2: "0.5rem", 380 | 2.2: "0.55rem", 381 | 2.375: ".59375rem", 382 | 2.5: "0.625rem", 383 | 2.7: "0.675rem", 384 | 3: "0.75rem", 385 | 3.5: "0.875rem", 386 | 3.6: "0.9rem", 387 | 4: "1rem", 388 | 4.5: "1.125rem", 389 | 4.92: "1.23rem", 390 | 5: "1.25rem", 391 | 5.25: "1.3125rem", 392 | 5.5: "1.375rem", 393 | 5.6: "1.4rem", 394 | 5.75: "1.4375rem", 395 | 6: "1.5rem", 396 | 6.35: "1.5875rem", 397 | 6.5: "1.625rem", 398 | 6.92: "1.73rem", 399 | 7: "1.75rem", 400 | 7.5: "1.875rem", 401 | 8: "2rem", 402 | 8.75: "2.1875rem", 403 | 9: "2.25rem", 404 | 10: "2.5rem", 405 | 11: "2.75rem", 406 | 11.252: "2.813rem", 407 | 12: "3rem", 408 | 14: "3.5rem", 409 | 16: "4rem", 410 | 18.5: "4.625rem", 411 | 19.5: "4.875rem", 412 | 20: "5rem", 413 | 24: "6rem", 414 | 28: "7rem", 415 | 30: "7.5rem", 416 | 32: "8rem", 417 | 34: "8.5rem", 418 | 36: "9rem", 419 | 40: "10rem", 420 | 44: "11rem", 421 | 48: "12rem", 422 | 52: "13rem", 423 | 54: "13.5rem", 424 | 56: "14rem", 425 | 60: "15rem", 426 | 62.5: "15.625rem", 427 | 64: "16rem", 428 | 68: "17rem", 429 | 68.5: "17.125rem", 430 | 72: "18rem", 431 | 75: "18.75rem", 432 | 80: "20rem", 433 | 90: "22.5rem", 434 | 96: "24rem", 435 | 120: "30rem", 436 | 135: "33.75rem", //sm 437 | 180: "45rem", //md 438 | 240: "60rem", //lg 439 | 285: "71.25rem", //xl 440 | 330: "82.5rem", //xxl 441 | "31/100": "31%", 442 | }, 443 | animation: { 444 | none: "none", 445 | spin: "spin 1s linear infinite", 446 | ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", 447 | pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", 448 | bounce: "bounce 1s infinite", 449 | "fade-up": "fade-up 1.5s both", 450 | }, 451 | aspectRatio: { 452 | auto: "auto", 453 | square: "1 / 1", 454 | video: "16 / 9", 455 | }, 456 | backdropBlur: ({ theme }) => theme("blur"), 457 | backdropBrightness: ({ theme }) => theme("brightness"), 458 | backdropContrast: ({ theme }) => theme("contrast"), 459 | backdropGrayscale: ({ theme }) => theme("grayscale"), 460 | backdropHueRotate: ({ theme }) => theme("hueRotate"), 461 | backdropInvert: ({ theme }) => theme("invert"), 462 | backdropOpacity: ({ theme }) => theme("opacity"), 463 | backdropSaturate: ({ theme }) => theme("saturate"), 464 | backdropSepia: ({ theme }) => theme("sepia"), 465 | backgroundColor: ({ theme }) => theme("colors"), 466 | backgroundImage: ({ theme }) => ({ 467 | none: "none", 468 | "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))", 469 | "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))", 470 | "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", 471 | "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))", 472 | "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))", 473 | "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))", 474 | "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))", 475 | "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))", 476 | 477 | "gradient-fuchsia": "linear-gradient(310deg," + theme("colors.purple.700") + "," + theme("colors.pink.500") + ")", 478 | "gradient-cyan": "linear-gradient(310deg," + theme("colors.blue.600") + "," + theme("colors.cyan.400") + ")", 479 | "gradient-orange": "linear-gradient(310deg," + theme("colors.red.500") + "," + theme("colors.yellow.400") + ")", 480 | "gradient-red": "linear-gradient(310deg," + theme("colors.red.600") + "," + theme("colors.rose.400") + ")", 481 | "gradient-lime": "linear-gradient(310deg," + theme("colors.green.600") + "," + theme("colors.lime.400") + ")", 482 | "gradient-slate": "linear-gradient(310deg," + theme("colors.slate.600") + "," + theme("colors.slate.300") + ")", 483 | "gradient-dark-gray": "linear-gradient(310deg," + theme("colors.gray.900") + "," + theme("colors.slate.800") + ")", 484 | "gradient-gray": "linear-gradient(310deg," + theme("colors.gray.400") + "," + theme("colors.gray.100") + ")", 485 | 486 | "gradient-horizontal-dark": "linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent)", 487 | "gradient-horizontal-light": "linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)", 488 | }), 489 | backgroundOpacity: ({ theme }) => theme("opacity"), 490 | backgroundPosition: { 491 | bottom: "bottom", 492 | center: "center", 493 | "x-25": "25% 0", 494 | left: "left", 495 | "left-bottom": "left bottom", 496 | "left-top": "left top", 497 | right: "right", 498 | "right-bottom": "right bottom", 499 | "right-top": "right top", 500 | top: "top", 501 | }, 502 | backgroundSize: { 503 | auto: "auto", 504 | cover: "cover", 505 | contain: "contain", 506 | 150: "150%", 507 | }, 508 | blur: { 509 | 0: "0", 510 | none: "0", 511 | sm: "4px", 512 | DEFAULT: "8px", 513 | md: "12px", 514 | lg: "16px", 515 | xl: "24px", 516 | "2xl": "30px", 517 | "3xl": "64px", 518 | }, 519 | brightness: { 520 | 0: "0", 521 | 50: ".5", 522 | 75: ".75", 523 | 90: ".9", 524 | 95: ".95", 525 | 100: "1", 526 | 105: "1.05", 527 | 110: "1.1", 528 | 125: "1.25", 529 | 150: "1.5", 530 | 200: "2", 531 | }, 532 | borderColor: ({ theme }) => ({ 533 | ...theme("colors"), 534 | DEFAULT: theme("colors.gray.200", "currentColor"), 535 | }), 536 | borderOpacity: ({ theme }) => theme("opacity"), 537 | borderRadius: ({ theme }) => ({ 538 | ...theme("spacing"), 539 | none: "0px", 540 | inherit: "inherit", 541 | xs: "0.0625rem", 542 | sm: "0.125rem", 543 | DEFAULT: "0.25rem", 544 | md: "0.375rem", 545 | lg: "0.5rem", 546 | xl: "0.75rem", 547 | "2xl": "1rem", 548 | "3xl": "1.5rem", 549 | "3.5xl": "1.875rem", 550 | full: "9999px", 551 | circle: "50%", 552 | blur: "40px", 553 | }), 554 | borderWidth: { 555 | DEFAULT: "1px", 556 | 0: "0px", 557 | 2: "2px", 558 | 4: "4px", 559 | 8: "8px", 560 | }, 561 | boxShadow: { 562 | "soft-xxs": "0 1px 5px 1px #ddd", 563 | "soft-xs": "0 3px 5px -1px rgba(0,0,0,.09),0 2px 3px -1px rgba(0,0,0,.07)", 564 | "soft-sm": "0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)", 565 | "soft-md": "0 4px 7px -1px rgba(0,0,0,.11),0 2px 4px -1px rgba(0,0,0,.07)", 566 | "soft-lg": "0 2px 12px 0 rgba(0,0,0,.16)", 567 | "soft-xl": "0 20px 27px 0 rgba(0,0,0,0.05)", 568 | "soft-2xl": "0 .3125rem .625rem 0 rgba(0,0,0,.12)", 569 | "soft-3xl": "0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06)", 570 | "soft-primary-outline": "0 0 0 2px #e9aede", 571 | blur: "inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05)", 572 | DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", 573 | inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", 574 | sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)", 575 | md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", 576 | lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", 577 | xl: "0 23px 45px -11px hsla(0,0%,8%,.25)", 578 | "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)", 579 | none: "none", 580 | }, 581 | boxShadowColor: ({ theme }) => theme("colors"), 582 | caretColor: ({ theme }) => theme("colors"), 583 | accentColor: ({ theme }) => ({ 584 | ...theme("colors"), 585 | auto: "auto", 586 | }), 587 | contrast: { 588 | 0: "0", 589 | 50: ".5", 590 | 75: ".75", 591 | 100: "1", 592 | 125: "1.25", 593 | 150: "1.5", 594 | 200: "2", 595 | }, 596 | container: { 597 | center: true, 598 | padding: "1.5rem", 599 | "max-width": { 600 | sm: "540px", 601 | md: "720px", 602 | lg: "960px", 603 | xl: "1140px", 604 | "2xl": "1320px", 605 | }, 606 | }, 607 | content: { 608 | none: "none", 609 | }, 610 | cursor: { 611 | auto: "auto", 612 | default: "default", 613 | pointer: "pointer", 614 | wait: "wait", 615 | text: "text", 616 | move: "move", 617 | help: "help", 618 | "not-allowed": "not-allowed", 619 | none: "none", 620 | "context-menu": "context-menu", 621 | progress: "progress", 622 | cell: "cell", 623 | crosshair: "crosshair", 624 | "vertical-text": "vertical-text", 625 | alias: "alias", 626 | copy: "copy", 627 | "no-drop": "no-drop", 628 | grab: "grab", 629 | grabbing: "grabbing", 630 | "all-scroll": "all-scroll", 631 | "col-resize": "col-resize", 632 | "row-resize": "row-resize", 633 | "n-resize": "n-resize", 634 | "e-resize": "e-resize", 635 | "s-resize": "s-resize", 636 | "w-resize": "w-resize", 637 | "ne-resize": "ne-resize", 638 | "nw-resize": "nw-resize", 639 | "se-resize": "se-resize", 640 | "sw-resize": "sw-resize", 641 | "ew-resize": "ew-resize", 642 | "ns-resize": "ns-resize", 643 | "nesw-resize": "nesw-resize", 644 | "nwse-resize": "nwse-resize", 645 | "zoom-in": "zoom-in", 646 | "zoom-out": "zoom-out", 647 | }, 648 | divideColor: ({ theme }) => theme("borderColor"), 649 | divideOpacity: ({ theme }) => theme("borderOpacity"), 650 | divideWidth: ({ theme }) => theme("borderWidth"), 651 | dropShadow: { 652 | sm: "0 1px 1px rgb(0 0 0 / 0.05)", 653 | DEFAULT: ["0 1px 2px rgb(0 0 0 / 0.1)", "0 1px 1px rgb(0 0 0 / 0.06)"], 654 | md: ["0 4px 3px rgb(0 0 0 / 0.07)", "0 2px 2px rgb(0 0 0 / 0.06)"], 655 | lg: ["0 10px 8px rgb(0 0 0 / 0.04)", "0 4px 3px rgb(0 0 0 / 0.1)"], 656 | xl: ["0 20px 13px rgb(0 0 0 / 0.03)", "0 8px 5px rgb(0 0 0 / 0.08)"], 657 | "2xl": "0 25px 25px rgb(0 0 0 / 0.15)", 658 | none: "0 0 #0000", 659 | }, 660 | fill: ({ theme }) => theme("colors"), 661 | grayscale: { 662 | 0: "0", 663 | DEFAULT: "100%", 664 | }, 665 | hueRotate: { 666 | 0: "0deg", 667 | 15: "15deg", 668 | 30: "30deg", 669 | 60: "60deg", 670 | 90: "90deg", 671 | 180: "180deg", 672 | }, 673 | invert: { 674 | 0: "0", 675 | DEFAULT: "100%", 676 | }, 677 | flex: { 678 | 1: "1 1 0%", 679 | auto: "1 1 auto", 680 | initial: "0 1 auto", 681 | none: "none", 682 | 0: "0 0 auto", 683 | }, 684 | flexBasis: ({ theme }) => ({ 685 | auto: "auto", 686 | ...theme("spacing"), 687 | "1/2": "50%", 688 | "1/3": "33.333333%", 689 | "2/3": "66.666667%", 690 | "1/4": "25%", 691 | "2/4": "50%", 692 | "3/4": "75%", 693 | "1/5": "20%", 694 | "2/5": "40%", 695 | "3/5": "60%", 696 | "4/5": "80%", 697 | "1/6": "16.666667%", 698 | "2/6": "33.333333%", 699 | "3/6": "50%", 700 | "4/6": "66.666667%", 701 | "5/6": "83.333333%", 702 | "1/12": "8.333333%", 703 | "2/12": "16.666667%", 704 | "3/12": "25%", 705 | "4/12": "33.333333%", 706 | "5/12": "41.666667%", 707 | "6/12": "50%", 708 | "7/12": "58.333333%", 709 | "8/12": "66.666667%", 710 | "9/12": "75%", 711 | "10/12": "83.333333%", 712 | "11/12": "91.666667%", 713 | full: "100%", 714 | }), 715 | flexGrow: { 716 | 0: "0", 717 | DEFAULT: "1", 718 | }, 719 | flexShrink: { 720 | 0: "0", 721 | DEFAULT: "1", 722 | }, 723 | fontFamily: { 724 | sans: ["Open Sans"], 725 | serif: ['SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', "serif"], 726 | body: ["Roboto", "sans-serif"], 727 | awesome: ["FontAwesome"], 728 | }, 729 | fontSize: ({ theme }) => ({ 730 | ...theme("spacing"), 731 | inherit: "inherit", 732 | "3xs": ["0.5rem", { lineHeight: "1rem" }], 733 | xxs: ["0.65rem", { lineHeight: "1rem" }], 734 | xs: ["0.75rem", { lineHeight: "1rem" }], 735 | sm: ["0.875rem", { lineHeight: "1.5rem" }], 736 | base: ["1rem", { lineHeight: "1.5rem" }], 737 | lg: ["1.125rem", { lineHeight: "1.75rem" }], 738 | xl: ["1.25rem", { lineHeight: "1.75rem" }], 739 | "2xl": ["1.5rem", { lineHeight: "2rem" }], 740 | "3xl": ["1.875rem", { lineHeight: "2.25rem" }], 741 | "4xl": ["2.25rem", { lineHeight: "2.5rem" }], 742 | "5xl": ["3rem", { lineHeight: "1" }], 743 | "6xl": ["3.75rem", { lineHeight: "1" }], 744 | "7xl": ["4.5rem", { lineHeight: "1" }], 745 | "8xl": ["5rem", { lineHeight: "1" }], 746 | "9xl": ["6rem", { lineHeight: "1" }], 747 | "10xl": ["8rem", { lineHeight: "1" }], 748 | "banner-calculate": ["calc(1.625rem+4.5vw)"], 749 | }), 750 | fontWeight: { 751 | thin: "100", 752 | extralight: "200", 753 | light: "300", 754 | normal: "400", 755 | medium: "500", 756 | semibold: "600", 757 | bold: "700", 758 | extrabold: "800", 759 | black: "900", 760 | }, 761 | gap: ({ theme }) => theme("spacing"), 762 | gradientColorStops: ({ theme }) => theme("colors"), 763 | gridAutoColumns: { 764 | auto: "auto", 765 | min: "min-content", 766 | max: "max-content", 767 | fr: "minmax(0, 1fr)", 768 | }, 769 | gridAutoRows: { 770 | auto: "auto", 771 | min: "min-content", 772 | max: "max-content", 773 | fr: "minmax(0, 1fr)", 774 | }, 775 | gridColumn: { 776 | auto: "auto", 777 | "span-1": "span 1 / span 1", 778 | "span-2": "span 2 / span 2", 779 | "span-3": "span 3 / span 3", 780 | "span-4": "span 4 / span 4", 781 | "span-5": "span 5 / span 5", 782 | "span-6": "span 6 / span 6", 783 | "span-7": "span 7 / span 7", 784 | "span-8": "span 8 / span 8", 785 | "span-9": "span 9 / span 9", 786 | "span-10": "span 10 / span 10", 787 | "span-11": "span 11 / span 11", 788 | "span-12": "span 12 / span 12", 789 | "span-full": "1 / -1", 790 | }, 791 | gridColumnEnd: { 792 | auto: "auto", 793 | 1: "1", 794 | 2: "2", 795 | 3: "3", 796 | 4: "4", 797 | 5: "5", 798 | 6: "6", 799 | 7: "7", 800 | 8: "8", 801 | 9: "9", 802 | 10: "10", 803 | 11: "11", 804 | 12: "12", 805 | 13: "13", 806 | }, 807 | gridColumnStart: { 808 | auto: "auto", 809 | 1: "1", 810 | 2: "2", 811 | 3: "3", 812 | 4: "4", 813 | 5: "5", 814 | 6: "6", 815 | 7: "7", 816 | 8: "8", 817 | 9: "9", 818 | 10: "10", 819 | 11: "11", 820 | 12: "12", 821 | 13: "13", 822 | }, 823 | gridRow: { 824 | auto: "auto", 825 | "span-1": "span 1 / span 1", 826 | "span-2": "span 2 / span 2", 827 | "span-3": "span 3 / span 3", 828 | "span-4": "span 4 / span 4", 829 | "span-5": "span 5 / span 5", 830 | "span-6": "span 6 / span 6", 831 | "span-full": "1 / -1", 832 | }, 833 | gridRowStart: { 834 | auto: "auto", 835 | 1: "1", 836 | 2: "2", 837 | 3: "3", 838 | 4: "4", 839 | 5: "5", 840 | 6: "6", 841 | 7: "7", 842 | }, 843 | gridRowEnd: { 844 | auto: "auto", 845 | 1: "1", 846 | 2: "2", 847 | 3: "3", 848 | 4: "4", 849 | 5: "5", 850 | 6: "6", 851 | 7: "7", 852 | }, 853 | gridTemplateColumns: { 854 | none: "none", 855 | 1: "repeat(1, minmax(0, 1fr))", 856 | 2: "repeat(2, minmax(0, 1fr))", 857 | 3: "repeat(3, minmax(0, 1fr))", 858 | 4: "repeat(4, minmax(0, 1fr))", 859 | 5: "repeat(5, minmax(0, 1fr))", 860 | 6: "repeat(6, minmax(0, 1fr))", 861 | 7: "repeat(7, minmax(0, 1fr))", 862 | 8: "repeat(8, minmax(0, 1fr))", 863 | 9: "repeat(9, minmax(0, 1fr))", 864 | 10: "repeat(10, minmax(0, 1fr))", 865 | 11: "repeat(11, minmax(0, 1fr))", 866 | 12: "repeat(12, minmax(0, 1fr))", 867 | }, 868 | gridTemplateRows: { 869 | none: "none", 870 | 1: "repeat(1, minmax(0, 1fr))", 871 | 2: "repeat(2, minmax(0, 1fr))", 872 | 3: "repeat(3, minmax(0, 1fr))", 873 | 4: "repeat(4, minmax(0, 1fr))", 874 | 5: "repeat(5, minmax(0, 1fr))", 875 | 6: "repeat(6, minmax(0, 1fr))", 876 | }, 877 | height: ({ theme }) => ({ 878 | auto: "auto", 879 | ...theme("spacing"), 880 | "1/2": "50%", 881 | "1/3": "33.333333%", 882 | "2/3": "66.666667%", 883 | "1/4": "25%", 884 | "2/4": "50%", 885 | "3/4": "75%", 886 | "1/5": "20%", 887 | "2/5": "40%", 888 | "3/5": "60%", 889 | "4/5": "80%", 890 | "1/6": "16.666667%", 891 | "2/6": "33.333333%", 892 | "3/6": "50%", 893 | "4/6": "66.666667%", 894 | "5/6": "83.333333%", 895 | full: "100%", 896 | sidenav: "calc(100vh - 370px)", 897 | screen: "100vh", 898 | min: "min-content", 899 | max: "max-content", 900 | fit: "fit-content", 901 | }), 902 | inset: ({ theme }) => ({ 903 | auto: "auto", 904 | ...theme("spacing"), 905 | "1/2": "50%", 906 | "1/3": "33.333333%", 907 | "2/3": "66.666667%", 908 | "1/4": "25%", 909 | "2/4": "50%", 910 | "3/4": "75%", 911 | full: "100%", 912 | }), 913 | keyframes: { 914 | "fade-up": { 915 | from: { 916 | opacity: "0", 917 | transform: "translateY(100%)", 918 | }, 919 | to: { 920 | opacity: "1", 921 | }, 922 | }, 923 | spin: { 924 | to: { 925 | transform: "rotate(360deg)", 926 | }, 927 | }, 928 | ping: { 929 | "75%, 100%": { 930 | transform: "scale(2)", 931 | opacity: "0", 932 | }, 933 | }, 934 | pulse: { 935 | "50%": { 936 | opacity: ".5", 937 | }, 938 | }, 939 | bounce: { 940 | "0%, 100%": { 941 | transform: "translateY(-25%)", 942 | animationTimingFunction: "cubic-bezier(0.8,0,1,1)", 943 | }, 944 | "50%": { 945 | transform: "none", 946 | animationTimingFunction: "cubic-bezier(0,0,0.2,1)", 947 | }, 948 | }, 949 | }, 950 | letterSpacing: { 951 | tighter: "-0.05em", 952 | tight: "-0.025em", 953 | "tight-soft": "-0.025rem", 954 | normal: "0em", 955 | none: "0", 956 | wide: "0.025em", 957 | wider: "0.05em", 958 | widest: "0.1em", 959 | }, 960 | lineHeight: ({ theme }) => ({ 961 | ...theme("spacing"), 962 | none: "1", 963 | tighter: "1.2", 964 | tight: "1.25", 965 | snug: "1.375", 966 | button: "1.3", 967 | pro: "1.4", 968 | normal: "1.5", 969 | default: "1.6", 970 | relaxed: "1.625", 971 | loose: "2", 972 | }), 973 | listStyleType: { 974 | none: "none", 975 | disc: "disc", 976 | decimal: "decimal", 977 | }, 978 | margin: ({ theme }) => ({ 979 | auto: "auto", 980 | ...theme("spacing"), 981 | }), 982 | maxHeight: ({ theme }) => ({ 983 | ...theme("spacing"), 984 | full: "100%", 985 | screen: "100vh", 986 | min: "min-content", 987 | max: "max-content", 988 | fit: "fit-content", 989 | }), 990 | maxWidth: ({ theme, breakpoints }) => ({ 991 | ...theme("spacing"), 992 | sidebar: "15.625rem", 993 | none: "none", 994 | 0: "0rem", 995 | xs: "20rem", 996 | sm: "24rem", 997 | md: "28rem", 998 | lg: "32rem", 999 | xl: "36rem", 1000 | "2xl": "42rem", 1001 | "3xl": "48rem", 1002 | "4xl": "56rem", 1003 | "5xl": "64rem", 1004 | "6xl": "72rem", 1005 | "7xl": "80rem", 1006 | full: "100%", 1007 | min: "min-content", 1008 | max: "max-content", 1009 | fit: "fit-content", 1010 | prose: "65ch", 1011 | ...breakpoints(theme("screens")), 1012 | }), 1013 | minHeight: ({ theme }) => ({ 1014 | auto: "auto", 1015 | ...theme("spacing"), 1016 | 0: "0px", 1017 | 6: "1.5rem", 1018 | full: "100%", 1019 | screen: "100vh", 1020 | "85-screen": "85vh", 1021 | "75-screen": "75vh", 1022 | "50-screen": "50vh", 1023 | min: "min-content", 1024 | max: "max-content", 1025 | fit: "fit-content", 1026 | }), 1027 | minWidth: ({ theme }) => ({ 1028 | auto: "auto", 1029 | ...theme("spacing"), 1030 | 0: "0px", 1031 | full: "100%", 1032 | min: "min-content", 1033 | max: "max-content", 1034 | fit: "fit-content", 1035 | }), 1036 | 1037 | objectPosition: { 1038 | bottom: "bottom", 1039 | center: "center", 1040 | left: "left", 1041 | "left-bottom": "left bottom", 1042 | "left-top": "left top", 1043 | right: "right", 1044 | "right-bottom": "right bottom", 1045 | "right-top": "right top", 1046 | top: "top", 1047 | }, 1048 | opacity: { 1049 | 0: "0", 1050 | 5: "0.05", 1051 | 10: "0.1", 1052 | 12.5: "0.125", 1053 | 20: "0.2", 1054 | 25: "0.25", 1055 | 30: "0.3", 1056 | 40: "0.4", 1057 | 50: "0.5", 1058 | 60: "0.6", 1059 | 65: "0.65", 1060 | 70: "0.7", 1061 | 75: "0.75", 1062 | 80: "0.8", 1063 | 85: "0.85", 1064 | 90: "0.9", 1065 | 95: "0.95", 1066 | 100: "1", 1067 | }, 1068 | order: { 1069 | first: "-9999", 1070 | last: "9999", 1071 | none: "0", 1072 | 1: "1", 1073 | 2: "2", 1074 | 3: "3", 1075 | 4: "4", 1076 | 5: "5", 1077 | 6: "6", 1078 | 7: "7", 1079 | 8: "8", 1080 | 9: "9", 1081 | 10: "10", 1082 | 11: "11", 1083 | 12: "12", 1084 | }, 1085 | padding: ({ theme }) => theme("spacing"), 1086 | placeholderColor: ({ theme }) => theme("colors"), 1087 | placeholderOpacity: ({ theme }) => theme("opacity"), 1088 | outlineColor: ({ theme }) => theme("colors"), 1089 | outlineOffset: { 1090 | 0: "0px", 1091 | 1: "1px", 1092 | 2: "2px", 1093 | 4: "4px", 1094 | 8: "8px", 1095 | }, 1096 | outlineWidth: { 1097 | 0: "0px", 1098 | 1: "1px", 1099 | 2: "2px", 1100 | 4: "4px", 1101 | 8: "8px", 1102 | }, 1103 | ringColor: ({ theme }) => ({ 1104 | DEFAULT: theme("colors.blue.500", "#3b82f6"), 1105 | ...theme("colors"), 1106 | }), 1107 | ringOffsetColor: ({ theme }) => theme("colors"), 1108 | ringOffsetWidth: { 1109 | 0: "0px", 1110 | 1: "1px", 1111 | 2: "2px", 1112 | 4: "4px", 1113 | 8: "8px", 1114 | }, 1115 | ringOpacity: ({ theme }) => ({ 1116 | DEFAULT: "0.5", 1117 | ...theme("opacity"), 1118 | }), 1119 | ringWidth: { 1120 | DEFAULT: "3px", 1121 | 0: "0px", 1122 | 1: "1px", 1123 | 2: "2px", 1124 | 4: "4px", 1125 | 8: "8px", 1126 | }, 1127 | rotate: { 1128 | 0: "0deg", 1129 | 1: "1deg", 1130 | 2: "2deg", 1131 | 3: "3deg", 1132 | 6: "6deg", 1133 | 12: "12deg", 1134 | 45: "45deg", 1135 | 90: "90deg", 1136 | 180: "180deg", 1137 | }, 1138 | saturate: { 1139 | 0: "0", 1140 | 50: ".5", 1141 | 100: "1", 1142 | 150: "1.5", 1143 | 200: "2", 1144 | }, 1145 | scale: { 1146 | 0: "0", 1147 | 50: ".5", 1148 | 60: ".6", 1149 | 70: ".7", 1150 | 75: ".75", 1151 | 90: ".9", 1152 | 95: ".95", 1153 | 100: "1", 1154 | 102: "1.02", 1155 | 105: "1.05", 1156 | 110: "1.1", 1157 | 125: "1.25", 1158 | 150: "1.5", 1159 | }, 1160 | scrollMargin: ({ theme }) => ({ 1161 | ...theme("spacing"), 1162 | }), 1163 | scrollPadding: ({ theme }) => theme("spacing"), 1164 | sepia: { 1165 | 0: "0", 1166 | DEFAULT: "100%", 1167 | }, 1168 | skew: { 1169 | 0: "0deg", 1170 | 1: "1deg", 1171 | 2: "2deg", 1172 | 3: "3deg", 1173 | 6: "6deg", 1174 | 10: "10deg", 1175 | 12: "12deg", 1176 | }, 1177 | space: ({ theme }) => ({ 1178 | ...theme("spacing"), 1179 | }), 1180 | stroke: ({ theme }) => theme("colors"), 1181 | strokeWidth: { 1182 | 0: "0", 1183 | 1: "1", 1184 | 2: "2", 1185 | }, 1186 | textColor: ({ theme }) => theme("colors"), 1187 | textDecorationColor: ({ theme }) => theme("colors"), 1188 | textDecorationThickness: { 1189 | auto: "auto", 1190 | "from-font": "from-font", 1191 | 0: "0px", 1192 | 1: "1px", 1193 | 2: "2px", 1194 | 4: "4px", 1195 | 8: "8px", 1196 | }, 1197 | textUnderlineOffset: { 1198 | auto: "auto", 1199 | 0: "0px", 1200 | 1: "1px", 1201 | 2: "2px", 1202 | 4: "4px", 1203 | 8: "8px", 1204 | }, 1205 | textIndent: ({ theme }) => ({ 1206 | ...theme("spacing"), 1207 | }), 1208 | textOpacity: ({ theme }) => theme("opacity"), 1209 | transformOrigin: { 1210 | center: "center", 1211 | top: "top", 1212 | "top-right": "top right", 1213 | right: "right", 1214 | "bottom-right": "bottom right", 1215 | bottom: "bottom", 1216 | "bottom-left": "bottom left", 1217 | left: "left", 1218 | "top-left": "top left", 1219 | "10-10": "10% 10%", 1220 | "10-90": "10% 90%", 1221 | }, 1222 | transitionDelay: { 1223 | 75: "75ms", 1224 | 100: "100ms", 1225 | 150: "150ms", 1226 | 200: "200ms", 1227 | 300: "300ms", 1228 | 500: "500ms", 1229 | 700: "700ms", 1230 | 1000: "1000ms", 1231 | }, 1232 | transitionDuration: { 1233 | DEFAULT: "150ms", 1234 | 75: "75ms", 1235 | 100: "100ms", 1236 | 150: "150ms", 1237 | 200: "200ms", 1238 | 250: "250ms", 1239 | 300: "300ms", 1240 | 350: "350ms", 1241 | 500: "500ms", 1242 | 600: "600ms", 1243 | 700: "700ms", 1244 | 1000: "1000ms", 1245 | }, 1246 | transitionProperty: { 1247 | none: "none", 1248 | all: "all", 1249 | DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", 1250 | colors: "color, background-color, border-color, text-decoration-color, fill, stroke", 1251 | color: "color", 1252 | height: "height", 1253 | "max-height": "max-height", 1254 | opacity: "opacity", 1255 | shadow: "box-shadow", 1256 | background: "background-color", 1257 | "border-color": "border-color", 1258 | transform: "transform", 1259 | }, 1260 | transitionTimingFunction: { 1261 | DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)", 1262 | bounce: "cubic-bezier(0.34, 1.61, 0.7, 1.3)", 1263 | linear: "linear", 1264 | in: "cubic-bezier(0.4, 0, 1, 1)", 1265 | "in-out": "cubic-bezier(0.4, 0, 0.2, 1)", 1266 | out: "cubic-bezier(0, 0, 0.2, 1)", 1267 | soft: "cubic-bezier(0.25, 0.1, 0.25, 1)", 1268 | "soft-in": "cubic-bezier(0.42, 0, 1, 1)", 1269 | "soft-in-out": "cubic-bezier(0.42, 0, 0.58, 1)", 1270 | "soft-out": "cubic-bezier(0, 0, 0.58, 1)", 1271 | }, 1272 | translate: ({ theme }) => ({ 1273 | ...theme("spacing"), 1274 | "1/2": "50%", 1275 | "1/3": "33.333333%", 1276 | "2/3": "66.666667%", 1277 | "1/4": "25%", 1278 | "2/4": "50%", 1279 | "3/4": "75%", 1280 | full: "100%", 1281 | }), 1282 | width: ({ theme }) => ({ 1283 | auto: "auto", 1284 | ...theme("spacing"), 1285 | "1/100": "1%", 1286 | "1/2": "50%", 1287 | "1/3": "33.333333%", 1288 | "2/3": "66.666667%", 1289 | "1/4": "25%", 1290 | "2/4": "50%", 1291 | "3/4": "75%", 1292 | "1/5": "20%", 1293 | "2/5": "40%", 1294 | "3/5": "60%", 1295 | "4/5": "80%", 1296 | "1/6": "16.666667%", 1297 | "2/6": "33.333333%", 1298 | "3/6": "50%", 1299 | "4/6": "66.666667%", 1300 | "5/6": "83.333333%", 1301 | "1/10": "10%", 1302 | "3/10": "30%", 1303 | "9/10": "90%", 1304 | "1/12": "8.333333%", 1305 | "2/12": "16.666667%", 1306 | "3/12": "25%", 1307 | "4/12": "33.333333%", 1308 | "5/12": "41.666667%", 1309 | "6/12": "50%", 1310 | "7/12": "58.333333%", 1311 | "8/12": "66.666667%", 1312 | "9/12": "75%", 1313 | "10/12": "83.333333%", 1314 | "11/12": "91.666667%", 1315 | full: "100%", 1316 | screen: "100vw", 1317 | min: "min-content", 1318 | max: "max-content", 1319 | fit: "fit-content", 1320 | }), 1321 | willChange: { 1322 | auto: "auto", 1323 | scroll: "scroll-position", 1324 | contents: "contents", 1325 | transform: "transform", 1326 | }, 1327 | zIndex: { 1328 | auto: "auto", 1329 | 0: "0", 1330 | 10: "10", 1331 | 20: "20", 1332 | 30: "30", 1333 | 40: "40", 1334 | 50: "50", 1335 | 100: "100", 1336 | 110: "110", 1337 | 990: "990", 1338 | sticky: "1020", 1339 | }, 1340 | }, 1341 | variants: { 1342 | display: ["responsive", "dropdown"], 1343 | }, 1344 | variantOrder: ["first", "last", "odd", "even", "visited", "checked", "empty", "read-only", "group-hover", "group-focus", "focus-within", "hover", "focus", "focus-visible", "active", "disabled"], 1345 | 1346 | plugins: [ 1347 | plugin(function ({ addComponents, addUtilities }) { 1348 | addUtilities({ 1349 | ".transform3d": { 1350 | transform: "perspective(999px) rotateX(0deg) translateZ(0)", 1351 | }, 1352 | ".transform3d-hover": { 1353 | transform: "perspective(999px) rotateX(7deg) translate3d(0,-4px,5px)", 1354 | }, 1355 | ".transform-dropdown": { 1356 | transform: "perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0,37px,0)", 1357 | }, 1358 | ".transform-dropdown-show": { 1359 | transform: "perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px)", 1360 | }, 1361 | ".flex-wrap-inherit": { 1362 | "flex-wrap": "inherit", 1363 | }, 1364 | }); 1365 | const typography = { 1366 | a: { 1367 | "letter-spacing": "-0.025rem", 1368 | }, 1369 | 1370 | hr: { 1371 | margin: "1rem 0", 1372 | border: "0", 1373 | opacity: ".25", 1374 | }, 1375 | 1376 | img: { 1377 | maxWidth: "none", 1378 | }, 1379 | 1380 | label: { 1381 | display: "inline-block", 1382 | }, 1383 | 1384 | p: { 1385 | "line-height": "1.625", 1386 | "font-weight": "400", 1387 | "margin-bottom": "1rem", 1388 | }, 1389 | 1390 | small: { 1391 | "font-size": ".875em", 1392 | }, 1393 | 1394 | svg: { 1395 | display: "inline", 1396 | }, 1397 | 1398 | table: { 1399 | "border-collapse": "inherit", 1400 | }, 1401 | 1402 | "h1, h2, h3, h4, h5, h6": { 1403 | "margin-bottom": ".5rem", 1404 | color: "#344767", 1405 | }, 1406 | 1407 | "h1, h2, h3, h4": { 1408 | "letter-spacing": "-0.05rem", 1409 | }, 1410 | 1411 | "h1, h2, h3": { 1412 | "font-weight": "700", 1413 | }, 1414 | "h4, h5, h6": { 1415 | "font-weight": "600", 1416 | }, 1417 | 1418 | h1: { 1419 | "font-size": "3rem", 1420 | "line-height": "1.25", 1421 | }, 1422 | h2: { 1423 | "font-size": "2.25rem", 1424 | "line-height": "1.3", 1425 | }, 1426 | h3: { 1427 | "font-size": "1.875rem", 1428 | "line-height": "1.375", 1429 | }, 1430 | h4: { 1431 | "font-size": "1.5rem", 1432 | "line-height": "1.375", 1433 | }, 1434 | h5: { 1435 | "font-size": "1.25rem", 1436 | "line-height": "1.375", 1437 | }, 1438 | h6: { 1439 | "font-size": "1rem", 1440 | "line-height": "1.625", 1441 | }, 1442 | }; 1443 | addComponents(typography); 1444 | }), 1445 | plugin(function ({ matchUtilities, theme }) { 1446 | matchUtilities({ 1447 | "bg-gradient": (angle) => ({ 1448 | "background-image": `linear-gradient(${angle}, var(--tw-gradient-stops))`, 1449 | }), 1450 | }); 1451 | }), 1452 | ], 1453 | }; 1454 | --------------------------------------------------------------------------------