├── package.json ├── LICENSE ├── lib ├── freewindcss.css.map ├── freewindcss.min.css.map ├── freewindcss.min.css └── freewindcss.css ├── .gitignore ├── README.md └── src └── freewindcss.scss /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "freewindcss", 3 | "version": "0.0.14", 4 | "description": "Use Tailwind's set values and units without installing Tailwind", 5 | "main": "lib/freewindcss.min.css", 6 | "scripts": { 7 | "build": "sass --style expanded src/freewindcss.scss lib/freewindcss.css && sass --style compressed src/freewindcss.scss lib/freewindcss.min.css && banner-cli lib/*.css" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/zvizvi/freewindcss.git" 12 | }, 13 | "author": "zvizvi", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/zvizvi/freewindcss/issues" 17 | }, 18 | "homepage": "https://github.com/zvizvi/freewindcss#readme", 19 | "devDependencies": { 20 | "banner-cli": "^0.14.3", 21 | "sass": "^1.62.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 zvizvi 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 | -------------------------------------------------------------------------------- /lib/freewindcss.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../src/freewindcss.scss"],"names":[],"mappings":"AAMA;AACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EAnNF;IAoNI;;;AAGF;EAvNF;IAwNI;;;AAGF;EA3NF;IA4NI;;;;AAIJ;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IAEE;IACA;;;AAIJ;EACE;IAEE;;EAGF;IACE;;;AAIJ;EACE;IAEE;IACA;;EAGF;IACE;IACA","file":"freewindcss.css"} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | -------------------------------------------------------------------------------- /lib/freewindcss.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../src/freewindcss.scss"],"names":[],"mappings":"AAMA,MAEE,gBACA,gBAEA,UACA,oBACA,gBACA,oBACA,eACA,oBACA,gBACA,oBACA,aACA,oBACA,gBACA,eACA,gBACA,aACA,gBACA,gBACA,iBACA,cACA,iBACA,gBACA,iBACA,cACA,iBACA,gBACA,iBACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACA,eACA,eACA,eACA,eACA,eACA,eAGA,kBAEA,sBACA,kBACA,sBACA,iBACA,sBACA,kBACA,sBACA,eACA,sBACA,kBACA,iBACA,kBACA,eACA,kBACA,kBACA,mBACA,gBACA,mBACA,kBACA,mBACA,gBACA,mBACA,kBACA,mBACA,gBACA,gBACA,gBACA,gBACA,gBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBAGA,gOACA,6EACA,mHAGA,sBACA,uBACA,qBACA,uBACA,sBACA,sBACA,wBACA,uBACA,oBACA,oBAGA,oBACA,0BACA,qBACA,sBACA,sBACA,wBACA,oBACA,yBACA,qBAGA,+BACA,8BACA,wBACA,4BACA,4BACA,4BAGA,wBACA,qBACA,wBACA,uBACA,wBACA,qBACA,wBACA,wBACA,qBACA,yBACA,yBACA,yBACA,4BACA,sBAGA,uBACA,0BACA,sBACA,0BACA,wBACA,yBACA,uBACA,yBACA,0BAGA,8CACA,2EACA,iFACA,mFACA,oFACA,qDACA,uDACA,4BAGA,wBACA,wBACA,qBACA,yBACA,yBACA,yBACA,0BACA,0BAGA,8DACA,mGACA,uGACA,uGACA,yGACA,iEACA,8CAGA,yBACA,yCACA,0CACA,+CAGA,wBACA,wBACA,uBACA,uBACA,uBACA,uBACA,uBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBAGA,gDACA,oEACA,wEACA,6CAGA,6BAEA,0BAnNF,MAoNI,8BAGF,yBAvNF,MAwNI,6BAGF,yBA3NF,MA4NI,6BAIJ,EAEE,sBAEA,iDACA,uDACA,0DACA,2DACA,2DACA,2DACA,2DACA,2DACA,yDACA,wDACA,wDACA,wDACA,sDACA,yDACA,0DACA,0DACA,0DACA,0DACA,0DACA,uDACA,uDACA,uDACA,uDACA,qDACA,yDACA,0DACA,0DACA,0DACA,0DACA,0DACA,uDACA,uDACA,uDACA,uDACA,qDACA,4DACA,6DACA,6DACA,6DACA,6DACA,6DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,2DACA,2DACA,2DACA,2DACA,2DACA,wDACA,wDACA,wDACA,wDACA,uDACA,wDACA,yDACA,yDACA,yDACA,yDACA,uDACA,uDACA,uDACA,uDACA,uDACA,sDACA,2DACA,4DACA,4DACA,4DACA,2DACA,2DACA,0DACA,0DACA,0DACA,0DACA,wDACA,0DACA,2DACA,2DACA,0DACA,0DACA,0DACA,yDACA,wDACA,yDACA,yDACA,uDACA,2DACA,4DACA,4DACA,2DACA,2DACA,0DACA,0DACA,yDACA,0DACA,0DACA,wDACA,yDACA,0DACA,0DACA,0DACA,yDACA,yDACA,yDACA,wDACA,uDACA,uDACA,sDACA,0DACA,2DACA,2DACA,2DACA,0DACA,yDACA,yDACA,yDACA,yDACA,wDACA,uDACA,4DACA,6DACA,6DACA,6DACA,4DACA,4DACA,2DACA,0DACA,yDACA,yDACA,yDACA,yDACA,0DACA,0DACA,yDACA,yDACA,yDACA,yDACA,yDACA,uDACA,uDACA,sDACA,yDACA,0DACA,0DACA,0DACA,yDACA,wDACA,wDACA,yDACA,wDACA,uDACA,sDACA,wDACA,yDACA,yDACA,yDACA,wDACA,wDACA,uDACA,uDACA,sDACA,uDACA,qDACA,yDACA,0DACA,0DACA,0DACA,yDACA,yDACA,wDACA,wDACA,wDACA,wDACA,uDACA,2DACA,4DACA,4DACA,4DACA,4DACA,2DACA,0DACA,0DACA,0DACA,0DACA,yDACA,2DACA,4DACA,4DACA,4DACA,4DACA,2DACA,2DACA,2DACA,0DACA,0DACA,0DACA,2DACA,4DACA,4DACA,4DACA,4DACA,2DACA,2DACA,2DACA,2DACA,0DACA,yDACA,4DACA,6DACA,6DACA,6DACA,6DACA,4DACA,4DACA,4DACA,4DACA,4DACA,yDACA,yDACA,0DACA,0DACA,0DACA,0DACA,yDACA,yDACA,wDACA,wDACA,wDACA,sDACA,yDACA,0DACA,0DACA,0DACA,0DACA,wDACA,wDACA,wDACA,wDACA,wDACA,sDAGF,mBACE,KACE,uBAGF,GACE,0BAIJ,mBACE,SAEE,mBACA,WAIJ,oBACE,QAEE,UAGF,IACE,YAIJ,qBACE,QAEE,2BACA,qDAGF,IACE,wBACA","file":"freewindcss.min.css"} -------------------------------------------------------------------------------- /lib/freewindcss.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Freewindcss v0.0.14 3 | * https://github.com/zvizvi/freewindcss#readme 4 | * 5 | * Copyright (c) 2023 zvizvi 6 | * Licensed under the MIT license 7 | */ 8 | 9 | :root{--fw-auto: auto;--fw-full: 100%;--fw-0: 0;--fw-0\5 : 0.125rem;--fw-1: 0.25rem;--fw-1\5 : 0.375rem;--fw-2: 0.5rem;--fw-2\5 : 0.625rem;--fw-3: 0.75rem;--fw-3\5 : 0.875rem;--fw-4: 1rem;--fw-4\5 : 1.125rem;--fw-5: 1.25rem;--fw-6: 1.5rem;--fw-7: 1.75rem;--fw-8: 2rem;--fw-9: 2.25rem;--fw-10: 2.5rem;--fw-11: 2.75rem;--fw-12: 3rem;--fw-13: 3.25rem;--fw-14: 3.5rem;--fw-15: 3.75rem;--fw-16: 4rem;--fw-17: 4.25rem;--fw-18: 4.5rem;--fw-19: 4.75rem;--fw-20: 5rem;--fw-24: 6rem;--fw-28: 7rem;--fw-32: 8rem;--fw-36: 9rem;--fw-40: 10rem;--fw-44: 11rem;--fw-48: 12rem;--fw-52: 13rem;--fw-56: 14rem;--fw-60: 15rem;--fw-64: 16rem;--fw-72: 18rem;--fw-80: 20rem;--fw-96: 24rem;--fw--full: -100%;--fw--0\5 : -0.125rem;--fw--1: -0.25rem;--fw--1\5 : -0.375rem;--fw--2: -0.5rem;--fw--2\5 : -0.625rem;--fw--3: -0.75rem;--fw--3\5 : -0.875rem;--fw--4: -1rem;--fw--4\5 : -1.125rem;--fw--5: -1.25rem;--fw--6: -1.5rem;--fw--7: -1.75rem;--fw--8: -2rem;--fw--9: -2.25rem;--fw--10: -2.5rem;--fw--11: -2.75rem;--fw--12: -3rem;--fw--13: -3.25rem;--fw--14: -3.5rem;--fw--15: -3.75rem;--fw--16: -4rem;--fw--17: -4.25rem;--fw--18: -4.5rem;--fw--19: -4.75rem;--fw--20: -5rem;--fw--24: -6rem;--fw--28: -7rem;--fw--32: -8rem;--fw--36: -9rem;--fw--40: -10rem;--fw--44: -11rem;--fw--48: -12rem;--fw--52: -13rem;--fw--56: -14rem;--fw--60: -15rem;--fw--64: -16rem;--fw--72: -18rem;--fw--80: -20rem;--fw--96: -24rem;--fw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--fw-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--fw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--fw-text-xs: 0.75rem;--fw-text-sm: 0.875rem;--fw-text-base: 1rem;--fw-text-lg: 1.125rem;--fw-text-xl: 1.25rem;--fw-text-2xl: 1.5rem;--fw-text-3xl: 1.875rem;--fw-text-4xl: 2.25rem;--fw-text-5xl: 3rem;--fw-text-6xl: 4rem;--fw-font-thin: 100;--fw-font-extralight: 200;--fw-font-light: 300;--fw-font-normal: 400;--fw-font-medium: 500;--fw-font-semibold: 600;--fw-font-bold: 700;--fw-font-extrabold: 800;--fw-font-black: 900;--fw-tracking-tighter: -0.05em;--fw-tracking-tight: -0.025em;--fw-tracking-normal: 0;--fw-tracking-wide: 0.025em;--fw-tracking-wider: 0.05em;--fw-tracking-widest: 0.1em;--fw-leading-3: 0.75rem;--fw-leading-4: 1rem;--fw-leading-5: 1.25rem;--fw-leading-6: 1.5rem;--fw-leading-7: 1.75rem;--fw-leading-8: 2rem;--fw-leading-9: 2.25rem;--fw-leading-10: 2.5rem;--fw-leading-none: 1;--fw-leading-tight: 1.25;--fw-leading-snug: 1.375;--fw-leading-normal: 1.5;--fw-leading-relaxed: 1.625;--fw-leading-loose: 2;--fw-rounded-none: 0px;--fw-rounded-sm: 0.125rem;--fw-rounded: 0.25rem;--fw-rounded-md: 0.375rem;--fw-rounded-lg: 0.5rem;--fw-rounded-xl: 0.75rem;--fw-rounded-2xl: 1rem;--fw-rounded-3xl: 1.5rem;--fw-rounded-full: 9999px;--fw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--fw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--fw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--fw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--fw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);--fw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--fw-shadow-none: 0 0 #0000;--fw-blur-none: blur(0);--fw-blur-sm: blur(4px);--fw-blur: blur(8px);--fw-blur-md: blur(12px);--fw-blur-lg: blur(16px);--fw-blur-xl: blur(24px);--fw-blur-2xl: blur(40px);--fw-blur-3xl: blur(64px);--fw-drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));--fw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));--fw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));--fw-drop-shadow-lg: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));--fw-drop-shadow-xl: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));--fw-drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));--fw-drop-shadow-none: drop-shadow(0 0 #0000);--fw-ease-linear: linear;--fw-ease-in: cubic-bezier(0.4, 0, 1, 1);--fw-ease-out: cubic-bezier(0, 0, 0.2, 1);--fw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);--fw-columns-3xs: 16rem;--fw-columns-2xs: 18rem;--fw-columns-xs: 20rem;--fw-columns-sm: 24rem;--fw-columns-md: 28rem;--fw-columns-lg: 32rem;--fw-columns-xl: 36rem;--fw-columns-2xl: 42rem;--fw-columns-3xl: 48rem;--fw-columns-4xl: 56rem;--fw-columns-5xl: 64rem;--fw-columns-6xl: 72rem;--fw-columns-7xl: 80rem;--fw-animation-spin: fw-spin 1s linear infinite;--fw-animation-ping: fw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;--fw-animation-pulse: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;--fw-animation-bounce: fw-bounce 1s infinite;--fw-container-width: 1280px}@media(max-width: 1024px){:root{--fw-container-width: 1024px}}@media(max-width: 768px){:root{--fw-container-width: 768px}}@media(max-width: 640px){:root{--fw-container-width: 640px}}*{--fw-color-opacity: 1;--fw-black: rgb(0 0 0 / var(--fw-color-opacity));--fw-white: rgb(255 255 255 / var(--fw-color-opacity));--fw-slate-50: rgb(248 250 252 / var(--fw-color-opacity));--fw-slate-100: rgb(241 245 249 / var(--fw-color-opacity));--fw-slate-200: rgb(226 232 240 / var(--fw-color-opacity));--fw-slate-300: rgb(203 213 225 / var(--fw-color-opacity));--fw-slate-400: rgb(148 163 184 / var(--fw-color-opacity));--fw-slate-500: rgb(100 116 139 / var(--fw-color-opacity));--fw-slate-600: rgb(71 85 105 / var(--fw-color-opacity));--fw-slate-700: rgb(51 65 85 / var(--fw-color-opacity));--fw-slate-800: rgb(30 41 59 / var(--fw-color-opacity));--fw-slate-900: rgb(15 23 42 / var(--fw-color-opacity));--fw-slate-950: rgb(2 6 23 / var(--fw-color-opacity));--fw-gray-50: rgb(249 250 251 / var(--fw-color-opacity));--fw-gray-100: rgb(243 244 246 / var(--fw-color-opacity));--fw-gray-200: rgb(229 231 235 / var(--fw-color-opacity));--fw-gray-300: rgb(209 213 219 / var(--fw-color-opacity));--fw-gray-400: rgb(156 163 175 / var(--fw-color-opacity));--fw-gray-500: rgb(107 114 128 / var(--fw-color-opacity));--fw-gray-600: rgb(75 85 99 / var(--fw-color-opacity));--fw-gray-700: rgb(55 65 81 / var(--fw-color-opacity));--fw-gray-800: rgb(31 41 55 / var(--fw-color-opacity));--fw-gray-900: rgb(17 24 39 / var(--fw-color-opacity));--fw-gray-950: rgb(3 7 18 / var(--fw-color-opacity));--fw-zinc-50: rgb(250 250 250 / var(--fw-color-opacity));--fw-zinc-100: rgb(244 244 245 / var(--fw-color-opacity));--fw-zinc-200: rgb(228 228 231 / var(--fw-color-opacity));--fw-zinc-300: rgb(212 212 216 / var(--fw-color-opacity));--fw-zinc-400: rgb(161 161 170 / var(--fw-color-opacity));--fw-zinc-500: rgb(113 113 122 / var(--fw-color-opacity));--fw-zinc-600: rgb(82 82 91 / var(--fw-color-opacity));--fw-zinc-700: rgb(63 63 70 / var(--fw-color-opacity));--fw-zinc-800: rgb(39 39 42 / var(--fw-color-opacity));--fw-zinc-900: rgb(24 24 27 / var(--fw-color-opacity));--fw-zinc-950: rgb(9 9 11 / var(--fw-color-opacity));--fw-neutral-50: rgb(250 250 250 / var(--fw-color-opacity));--fw-neutral-100: rgb(245 245 245 / var(--fw-color-opacity));--fw-neutral-200: rgb(229 229 229 / var(--fw-color-opacity));--fw-neutral-300: rgb(212 212 212 / var(--fw-color-opacity));--fw-neutral-400: rgb(163 163 163 / var(--fw-color-opacity));--fw-neutral-500: rgb(115 115 115 / var(--fw-color-opacity));--fw-neutral-600: rgb(82 82 82 / var(--fw-color-opacity));--fw-neutral-700: rgb(64 64 64 / var(--fw-color-opacity));--fw-neutral-800: rgb(38 38 38 / var(--fw-color-opacity));--fw-neutral-900: rgb(23 23 23 / var(--fw-color-opacity));--fw-neutral-950: rgb(10 10 10 / var(--fw-color-opacity));--fw-stone-50: rgb(250 250 249 / var(--fw-color-opacity));--fw-stone-100: rgb(245 245 244 / var(--fw-color-opacity));--fw-stone-200: rgb(231 229 228 / var(--fw-color-opacity));--fw-stone-300: rgb(214 211 209 / var(--fw-color-opacity));--fw-stone-400: rgb(168 162 158 / var(--fw-color-opacity));--fw-stone-500: rgb(120 113 108 / var(--fw-color-opacity));--fw-stone-600: rgb(87 83 78 / var(--fw-color-opacity));--fw-stone-700: rgb(68 64 60 / var(--fw-color-opacity));--fw-stone-800: rgb(41 37 36 / var(--fw-color-opacity));--fw-stone-900: rgb(28 25 23 / var(--fw-color-opacity));--fw-stone-950: rgb(12 10 9 / var(--fw-color-opacity));--fw-red-50: rgb(254 242 242 / var(--fw-color-opacity));--fw-red-100: rgb(254 226 226 / var(--fw-color-opacity));--fw-red-200: rgb(254 202 202 / var(--fw-color-opacity));--fw-red-300: rgb(252 165 165 / var(--fw-color-opacity));--fw-red-400: rgb(248 113 113 / var(--fw-color-opacity));--fw-red-500: rgb(239 68 68 / var(--fw-color-opacity));--fw-red-600: rgb(220 38 38 / var(--fw-color-opacity));--fw-red-700: rgb(185 28 28 / var(--fw-color-opacity));--fw-red-800: rgb(153 27 27 / var(--fw-color-opacity));--fw-red-900: rgb(127 29 29 / var(--fw-color-opacity));--fw-red-950: rgb(69 10 10 / var(--fw-color-opacity));--fw-orange-50: rgb(255 247 237 / var(--fw-color-opacity));--fw-orange-100: rgb(255 237 213 / var(--fw-color-opacity));--fw-orange-200: rgb(254 215 170 / var(--fw-color-opacity));--fw-orange-300: rgb(253 186 116 / var(--fw-color-opacity));--fw-orange-400: rgb(251 146 60 / var(--fw-color-opacity));--fw-orange-500: rgb(249 115 22 / var(--fw-color-opacity));--fw-orange-600: rgb(234 88 12 / var(--fw-color-opacity));--fw-orange-700: rgb(194 65 12 / var(--fw-color-opacity));--fw-orange-800: rgb(154 52 18 / var(--fw-color-opacity));--fw-orange-900: rgb(124 45 18 / var(--fw-color-opacity));--fw-orange-950: rgb(67 20 7 / var(--fw-color-opacity));--fw-amber-50: rgb(255 251 235 / var(--fw-color-opacity));--fw-amber-100: rgb(254 243 199 / var(--fw-color-opacity));--fw-amber-200: rgb(253 230 138 / var(--fw-color-opacity));--fw-amber-300: rgb(252 211 77 / var(--fw-color-opacity));--fw-amber-400: rgb(251 191 36 / var(--fw-color-opacity));--fw-amber-500: rgb(245 158 11 / var(--fw-color-opacity));--fw-amber-600: rgb(217 119 6 / var(--fw-color-opacity));--fw-amber-700: rgb(180 83 9 / var(--fw-color-opacity));--fw-amber-800: rgb(146 64 14 / var(--fw-color-opacity));--fw-amber-900: rgb(120 53 15 / var(--fw-color-opacity));--fw-amber-950: rgb(69 26 3 / var(--fw-color-opacity));--fw-yellow-50: rgb(254 252 232 / var(--fw-color-opacity));--fw-yellow-100: rgb(254 249 195 / var(--fw-color-opacity));--fw-yellow-200: rgb(254 240 138 / var(--fw-color-opacity));--fw-yellow-300: rgb(253 224 71 / var(--fw-color-opacity));--fw-yellow-400: rgb(250 204 21 / var(--fw-color-opacity));--fw-yellow-500: rgb(234 179 8 / var(--fw-color-opacity));--fw-yellow-600: rgb(202 138 4 / var(--fw-color-opacity));--fw-yellow-700: rgb(161 98 7 / var(--fw-color-opacity));--fw-yellow-800: rgb(133 77 14 / var(--fw-color-opacity));--fw-yellow-900: rgb(113 63 18 / var(--fw-color-opacity));--fw-yellow-950: rgb(66 32 6 / var(--fw-color-opacity));--fw-lime-50: rgb(247 254 231 / var(--fw-color-opacity));--fw-lime-100: rgb(236 252 203 / var(--fw-color-opacity));--fw-lime-200: rgb(217 249 157 / var(--fw-color-opacity));--fw-lime-300: rgb(190 242 100 / var(--fw-color-opacity));--fw-lime-400: rgb(163 230 53 / var(--fw-color-opacity));--fw-lime-500: rgb(132 204 22 / var(--fw-color-opacity));--fw-lime-600: rgb(101 163 13 / var(--fw-color-opacity));--fw-lime-700: rgb(77 124 15 / var(--fw-color-opacity));--fw-lime-800: rgb(63 98 18 / var(--fw-color-opacity));--fw-lime-900: rgb(54 83 20 / var(--fw-color-opacity));--fw-lime-950: rgb(26 46 5 / var(--fw-color-opacity));--fw-green-50: rgb(240 253 244 / var(--fw-color-opacity));--fw-green-100: rgb(220 252 231 / var(--fw-color-opacity));--fw-green-200: rgb(187 247 208 / var(--fw-color-opacity));--fw-green-300: rgb(134 239 172 / var(--fw-color-opacity));--fw-green-400: rgb(74 222 128 / var(--fw-color-opacity));--fw-green-500: rgb(34 197 94 / var(--fw-color-opacity));--fw-green-600: rgb(22 163 74 / var(--fw-color-opacity));--fw-green-700: rgb(21 128 61 / var(--fw-color-opacity));--fw-green-800: rgb(22 101 52 / var(--fw-color-opacity));--fw-green-900: rgb(20 83 45 / var(--fw-color-opacity));--fw-green-950: rgb(5 46 22 / var(--fw-color-opacity));--fw-emerald-50: rgb(236 253 245 / var(--fw-color-opacity));--fw-emerald-100: rgb(209 250 229 / var(--fw-color-opacity));--fw-emerald-200: rgb(167 243 208 / var(--fw-color-opacity));--fw-emerald-300: rgb(110 231 183 / var(--fw-color-opacity));--fw-emerald-400: rgb(52 211 153 / var(--fw-color-opacity));--fw-emerald-500: rgb(16 185 129 / var(--fw-color-opacity));--fw-emerald-600: rgb(5 150 105 / var(--fw-color-opacity));--fw-emerald-700: rgb(4 120 87 / var(--fw-color-opacity));--fw-emerald-800: rgb(6 95 70 / var(--fw-color-opacity));--fw-emerald-900: rgb(6 78 59 / var(--fw-color-opacity));--fw-emerald-950: rgb(2 44 34 / var(--fw-color-opacity));--fw-teal-50: rgb(240 253 250 / var(--fw-color-opacity));--fw-teal-100: rgb(204 251 241 / var(--fw-color-opacity));--fw-teal-200: rgb(153 246 228 / var(--fw-color-opacity));--fw-teal-300: rgb(94 234 212 / var(--fw-color-opacity));--fw-teal-400: rgb(45 212 191 / var(--fw-color-opacity));--fw-teal-500: rgb(20 184 166 / var(--fw-color-opacity));--fw-teal-600: rgb(13 148 136 / var(--fw-color-opacity));--fw-teal-700: rgb(15 118 110 / var(--fw-color-opacity));--fw-teal-800: rgb(17 94 89 / var(--fw-color-opacity));--fw-teal-900: rgb(19 78 74 / var(--fw-color-opacity));--fw-teal-950: rgb(4 47 46 / var(--fw-color-opacity));--fw-cyan-50: rgb(236 254 255 / var(--fw-color-opacity));--fw-cyan-100: rgb(207 250 254 / var(--fw-color-opacity));--fw-cyan-200: rgb(165 243 252 / var(--fw-color-opacity));--fw-cyan-300: rgb(103 232 249 / var(--fw-color-opacity));--fw-cyan-400: rgb(34 211 238 / var(--fw-color-opacity));--fw-cyan-500: rgb(6 182 212 / var(--fw-color-opacity));--fw-cyan-600: rgb(8 145 178 / var(--fw-color-opacity));--fw-cyan-700: rgb(14 116 144 / var(--fw-color-opacity));--fw-cyan-800: rgb(21 94 117 / var(--fw-color-opacity));--fw-cyan-900: rgb(22 78 99 / var(--fw-color-opacity));--fw-cyan-950: rgb(8 51 68 / var(--fw-color-opacity));--fw-sky-50: rgb(240 249 255 / var(--fw-color-opacity));--fw-sky-100: rgb(224 242 254 / var(--fw-color-opacity));--fw-sky-200: rgb(186 230 253 / var(--fw-color-opacity));--fw-sky-300: rgb(125 211 252 / var(--fw-color-opacity));--fw-sky-400: rgb(56 189 248 / var(--fw-color-opacity));--fw-sky-500: rgb(14 165 233 / var(--fw-color-opacity));--fw-sky-600: rgb(2 132 199 / var(--fw-color-opacity));--fw-sky-700: rgb(3 105 161 / var(--fw-color-opacity));--fw-sky-800: rgb(7 89 133 / var(--fw-color-opacity));--fw-sky-900: rgb(12 74 110 / var(--fw-color-opacity));--fw-sky-950: rgb(8 47 73 / var(--fw-color-opacity));--fw-blue-50: rgb(239 246 255 / var(--fw-color-opacity));--fw-blue-100: rgb(219 234 254 / var(--fw-color-opacity));--fw-blue-200: rgb(191 219 254 / var(--fw-color-opacity));--fw-blue-300: rgb(147 197 253 / var(--fw-color-opacity));--fw-blue-400: rgb(96 165 250 / var(--fw-color-opacity));--fw-blue-500: rgb(59 130 246 / var(--fw-color-opacity));--fw-blue-600: rgb(37 99 235 / var(--fw-color-opacity));--fw-blue-700: rgb(29 78 216 / var(--fw-color-opacity));--fw-blue-800: rgb(30 64 175 / var(--fw-color-opacity));--fw-blue-900: rgb(30 58 138 / var(--fw-color-opacity));--fw-blue-950: rgb(23 37 84 / var(--fw-color-opacity));--fw-indigo-50: rgb(238 242 255 / var(--fw-color-opacity));--fw-indigo-100: rgb(224 231 255 / var(--fw-color-opacity));--fw-indigo-200: rgb(199 210 254 / var(--fw-color-opacity));--fw-indigo-300: rgb(165 180 252 / var(--fw-color-opacity));--fw-indigo-400: rgb(129 140 248 / var(--fw-color-opacity));--fw-indigo-500: rgb(99 102 241 / var(--fw-color-opacity));--fw-indigo-600: rgb(79 70 229 / var(--fw-color-opacity));--fw-indigo-700: rgb(67 56 202 / var(--fw-color-opacity));--fw-indigo-800: rgb(55 48 163 / var(--fw-color-opacity));--fw-indigo-900: rgb(49 46 129 / var(--fw-color-opacity));--fw-indigo-950: rgb(30 27 75 / var(--fw-color-opacity));--fw-violet-50: rgb(245 243 255 / var(--fw-color-opacity));--fw-violet-100: rgb(237 233 254 / var(--fw-color-opacity));--fw-violet-200: rgb(221 214 254 / var(--fw-color-opacity));--fw-violet-300: rgb(196 181 253 / var(--fw-color-opacity));--fw-violet-400: rgb(167 139 250 / var(--fw-color-opacity));--fw-violet-500: rgb(139 92 246 / var(--fw-color-opacity));--fw-violet-600: rgb(124 58 237 / var(--fw-color-opacity));--fw-violet-700: rgb(109 40 217 / var(--fw-color-opacity));--fw-violet-800: rgb(91 33 182 / var(--fw-color-opacity));--fw-violet-900: rgb(76 29 149 / var(--fw-color-opacity));--fw-violet-950: rgb(46 16 101 / var(--fw-color-opacity));--fw-purple-50: rgb(250 245 255 / var(--fw-color-opacity));--fw-purple-100: rgb(243 232 255 / var(--fw-color-opacity));--fw-purple-200: rgb(233 213 255 / var(--fw-color-opacity));--fw-purple-300: rgb(216 180 254 / var(--fw-color-opacity));--fw-purple-400: rgb(192 132 252 / var(--fw-color-opacity));--fw-purple-500: rgb(168 85 247 / var(--fw-color-opacity));--fw-purple-600: rgb(147 51 234 / var(--fw-color-opacity));--fw-purple-700: rgb(126 34 206 / var(--fw-color-opacity));--fw-purple-800: rgb(107 33 168 / var(--fw-color-opacity));--fw-purple-900: rgb(88 28 135 / var(--fw-color-opacity));--fw-purple-950: rgb(59 7 100 / var(--fw-color-opacity));--fw-fuchsia-50: rgb(253 244 255 / var(--fw-color-opacity));--fw-fuchsia-100: rgb(250 232 255 / var(--fw-color-opacity));--fw-fuchsia-200: rgb(245 208 254 / var(--fw-color-opacity));--fw-fuchsia-300: rgb(240 171 252 / var(--fw-color-opacity));--fw-fuchsia-400: rgb(232 121 249 / var(--fw-color-opacity));--fw-fuchsia-500: rgb(217 70 239 / var(--fw-color-opacity));--fw-fuchsia-600: rgb(192 38 211 / var(--fw-color-opacity));--fw-fuchsia-700: rgb(162 28 175 / var(--fw-color-opacity));--fw-fuchsia-800: rgb(134 25 143 / var(--fw-color-opacity));--fw-fuchsia-900: rgb(112 26 117 / var(--fw-color-opacity));--fw-fuchsia-950: rgb(74 4 78 / var(--fw-color-opacity));--fw-pink-50: rgb(253 242 248 / var(--fw-color-opacity));--fw-pink-100: rgb(252 231 243 / var(--fw-color-opacity));--fw-pink-200: rgb(251 207 232 / var(--fw-color-opacity));--fw-pink-300: rgb(249 168 212 / var(--fw-color-opacity));--fw-pink-400: rgb(244 114 182 / var(--fw-color-opacity));--fw-pink-500: rgb(236 72 153 / var(--fw-color-opacity));--fw-pink-600: rgb(219 39 119 / var(--fw-color-opacity));--fw-pink-700: rgb(190 24 93 / var(--fw-color-opacity));--fw-pink-800: rgb(157 23 77 / var(--fw-color-opacity));--fw-pink-900: rgb(131 24 67 / var(--fw-color-opacity));--fw-pink-950: rgb(80 7 36 / var(--fw-color-opacity));--fw-rose-50: rgb(255 241 242 / var(--fw-color-opacity));--fw-rose-100: rgb(255 228 230 / var(--fw-color-opacity));--fw-rose-200: rgb(254 205 211 / var(--fw-color-opacity));--fw-rose-300: rgb(253 164 175 / var(--fw-color-opacity));--fw-rose-400: rgb(251 113 133 / var(--fw-color-opacity));--fw-rose-500: rgb(244 63 94 / var(--fw-color-opacity));--fw-rose-600: rgb(225 29 72 / var(--fw-color-opacity));--fw-rose-700: rgb(190 18 60 / var(--fw-color-opacity));--fw-rose-800: rgb(159 18 57 / var(--fw-color-opacity));--fw-rose-900: rgb(136 19 55 / var(--fw-color-opacity));--fw-rose-950: rgb(76 5 25 / var(--fw-color-opacity))}@keyframes fw-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes fw-ping{75%,100%{transform:scale(2);opacity:0}}@keyframes fw-pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes fw-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}/*# sourceMappingURL=freewindcss.min.css.map */ 10 | -------------------------------------------------------------------------------- /lib/freewindcss.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Freewindcss v0.0.14 3 | * https://github.com/zvizvi/freewindcss#readme 4 | * 5 | * Copyright (c) 2023 zvizvi 6 | * Licensed under the MIT license 7 | */ 8 | 9 | :root { 10 | /* sizing and spacing */ 11 | --fw-auto: auto; 12 | --fw-full: 100%; 13 | --fw-0: 0; 14 | --fw-0\5 : 0.125rem; 15 | --fw-1: 0.25rem; 16 | --fw-1\5 : 0.375rem; 17 | --fw-2: 0.5rem; 18 | --fw-2\5 : 0.625rem; 19 | --fw-3: 0.75rem; 20 | --fw-3\5 : 0.875rem; 21 | --fw-4: 1rem; 22 | --fw-4\5 : 1.125rem; 23 | --fw-5: 1.25rem; 24 | --fw-6: 1.5rem; 25 | --fw-7: 1.75rem; 26 | --fw-8: 2rem; 27 | --fw-9: 2.25rem; 28 | --fw-10: 2.5rem; 29 | --fw-11: 2.75rem; 30 | --fw-12: 3rem; 31 | --fw-13: 3.25rem; 32 | --fw-14: 3.5rem; 33 | --fw-15: 3.75rem; 34 | --fw-16: 4rem; 35 | --fw-17: 4.25rem; 36 | --fw-18: 4.5rem; 37 | --fw-19: 4.75rem; 38 | --fw-20: 5rem; 39 | --fw-24: 6rem; 40 | --fw-28: 7rem; 41 | --fw-32: 8rem; 42 | --fw-36: 9rem; 43 | --fw-40: 10rem; 44 | --fw-44: 11rem; 45 | --fw-48: 12rem; 46 | --fw-52: 13rem; 47 | --fw-56: 14rem; 48 | --fw-60: 15rem; 49 | --fw-64: 16rem; 50 | --fw-72: 18rem; 51 | --fw-80: 20rem; 52 | --fw-96: 24rem; 53 | /* negative sizing and spacing */ 54 | --fw--full: -100%; 55 | --fw--0\5 : -0.125rem; 56 | --fw--1: -0.25rem; 57 | --fw--1\5 : -0.375rem; 58 | --fw--2: -0.5rem; 59 | --fw--2\5 : -0.625rem; 60 | --fw--3: -0.75rem; 61 | --fw--3\5 : -0.875rem; 62 | --fw--4: -1rem; 63 | --fw--4\5 : -1.125rem; 64 | --fw--5: -1.25rem; 65 | --fw--6: -1.5rem; 66 | --fw--7: -1.75rem; 67 | --fw--8: -2rem; 68 | --fw--9: -2.25rem; 69 | --fw--10: -2.5rem; 70 | --fw--11: -2.75rem; 71 | --fw--12: -3rem; 72 | --fw--13: -3.25rem; 73 | --fw--14: -3.5rem; 74 | --fw--15: -3.75rem; 75 | --fw--16: -4rem; 76 | --fw--17: -4.25rem; 77 | --fw--18: -4.5rem; 78 | --fw--19: -4.75rem; 79 | --fw--20: -5rem; 80 | --fw--24: -6rem; 81 | --fw--28: -7rem; 82 | --fw--32: -8rem; 83 | --fw--36: -9rem; 84 | --fw--40: -10rem; 85 | --fw--44: -11rem; 86 | --fw--48: -12rem; 87 | --fw--52: -13rem; 88 | --fw--56: -14rem; 89 | --fw--60: -15rem; 90 | --fw--64: -16rem; 91 | --fw--72: -18rem; 92 | --fw--80: -20rem; 93 | --fw--96: -24rem; 94 | /* font family */ 95 | --fw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 96 | --fw-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 97 | --fw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 98 | /* font sizes */ 99 | --fw-text-xs: 0.75rem; 100 | --fw-text-sm: 0.875rem; 101 | --fw-text-base: 1rem; 102 | --fw-text-lg: 1.125rem; 103 | --fw-text-xl: 1.25rem; 104 | --fw-text-2xl: 1.5rem; 105 | --fw-text-3xl: 1.875rem; 106 | --fw-text-4xl: 2.25rem; 107 | --fw-text-5xl: 3rem; 108 | --fw-text-6xl: 4rem; 109 | /* font weight */ 110 | --fw-font-thin: 100; 111 | --fw-font-extralight: 200; 112 | --fw-font-light: 300; 113 | --fw-font-normal: 400; 114 | --fw-font-medium: 500; 115 | --fw-font-semibold: 600; 116 | --fw-font-bold: 700; 117 | --fw-font-extrabold: 800; 118 | --fw-font-black: 900; 119 | /* letter spacing */ 120 | --fw-tracking-tighter: -0.05em; 121 | --fw-tracking-tight: -0.025em; 122 | --fw-tracking-normal: 0; 123 | --fw-tracking-wide: 0.025em; 124 | --fw-tracking-wider: 0.05em; 125 | --fw-tracking-widest: 0.1em; 126 | /* line height */ 127 | --fw-leading-3: 0.75rem; 128 | --fw-leading-4: 1rem; 129 | --fw-leading-5: 1.25rem; 130 | --fw-leading-6: 1.5rem; 131 | --fw-leading-7: 1.75rem; 132 | --fw-leading-8: 2rem; 133 | --fw-leading-9: 2.25rem; 134 | --fw-leading-10: 2.5rem; 135 | --fw-leading-none: 1; 136 | --fw-leading-tight: 1.25; 137 | --fw-leading-snug: 1.375; 138 | --fw-leading-normal: 1.5; 139 | --fw-leading-relaxed: 1.625; 140 | --fw-leading-loose: 2; 141 | /* border radius */ 142 | --fw-rounded-none: 0px; 143 | --fw-rounded-sm: 0.125rem; 144 | --fw-rounded: 0.25rem; 145 | --fw-rounded-md: 0.375rem; 146 | --fw-rounded-lg: 0.5rem; 147 | --fw-rounded-xl: 0.75rem; 148 | --fw-rounded-2xl: 1rem; 149 | --fw-rounded-3xl: 1.5rem; 150 | --fw-rounded-full: 9999px; 151 | /* box shadow */ 152 | --fw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); 153 | --fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 154 | --fw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 155 | --fw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 156 | --fw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); 157 | --fw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); 158 | --fw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); 159 | --fw-shadow-none: 0 0 #0000; 160 | /* filter blur/backdrop-blur */ 161 | --fw-blur-none: blur(0); 162 | --fw-blur-sm: blur(4px); 163 | --fw-blur: blur(8px); 164 | --fw-blur-md: blur(12px); 165 | --fw-blur-lg: blur(16px); 166 | --fw-blur-xl: blur(24px); 167 | --fw-blur-2xl: blur(40px); 168 | --fw-blur-3xl: blur(64px); 169 | /* filter drop-shadow */ 170 | --fw-drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); 171 | --fw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 172 | --fw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 173 | --fw-drop-shadow-lg: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); 174 | --fw-drop-shadow-xl: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); 175 | --fw-drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); 176 | --fw-drop-shadow-none: drop-shadow(0 0 #0000); 177 | /* transition timing */ 178 | --fw-ease-linear: linear; 179 | --fw-ease-in: cubic-bezier(0.4, 0, 1, 1); 180 | --fw-ease-out: cubic-bezier(0, 0, 0.2, 1); 181 | --fw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 182 | /* columns */ 183 | --fw-columns-3xs: 16rem; 184 | --fw-columns-2xs: 18rem; 185 | --fw-columns-xs: 20rem; 186 | --fw-columns-sm: 24rem; 187 | --fw-columns-md: 28rem; 188 | --fw-columns-lg: 32rem; 189 | --fw-columns-xl: 36rem; 190 | --fw-columns-2xl: 42rem; 191 | --fw-columns-3xl: 48rem; 192 | --fw-columns-4xl: 56rem; 193 | --fw-columns-5xl: 64rem; 194 | --fw-columns-6xl: 72rem; 195 | --fw-columns-7xl: 80rem; 196 | /* animation */ 197 | --fw-animation-spin: fw-spin 1s linear infinite; 198 | --fw-animation-ping: fw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; 199 | --fw-animation-pulse: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 200 | --fw-animation-bounce: fw-bounce 1s infinite; 201 | /* container width */ 202 | --fw-container-width: 1280px; 203 | } 204 | @media (max-width: 1024px) { 205 | :root { 206 | --fw-container-width: 1024px; 207 | } 208 | } 209 | @media (max-width: 768px) { 210 | :root { 211 | --fw-container-width: 768px; 212 | } 213 | } 214 | @media (max-width: 640px) { 215 | :root { 216 | --fw-container-width: 640px; 217 | } 218 | } 219 | 220 | * { 221 | /* colors */ 222 | --fw-color-opacity: 1; 223 | --fw-black: rgb(0 0 0 / var(--fw-color-opacity)); 224 | --fw-white: rgb(255 255 255 / var(--fw-color-opacity)); 225 | --fw-slate-50: rgb(248 250 252 / var(--fw-color-opacity)); 226 | --fw-slate-100: rgb(241 245 249 / var(--fw-color-opacity)); 227 | --fw-slate-200: rgb(226 232 240 / var(--fw-color-opacity)); 228 | --fw-slate-300: rgb(203 213 225 / var(--fw-color-opacity)); 229 | --fw-slate-400: rgb(148 163 184 / var(--fw-color-opacity)); 230 | --fw-slate-500: rgb(100 116 139 / var(--fw-color-opacity)); 231 | --fw-slate-600: rgb(71 85 105 / var(--fw-color-opacity)); 232 | --fw-slate-700: rgb(51 65 85 / var(--fw-color-opacity)); 233 | --fw-slate-800: rgb(30 41 59 / var(--fw-color-opacity)); 234 | --fw-slate-900: rgb(15 23 42 / var(--fw-color-opacity)); 235 | --fw-slate-950: rgb(2 6 23 / var(--fw-color-opacity)); 236 | --fw-gray-50: rgb(249 250 251 / var(--fw-color-opacity)); 237 | --fw-gray-100: rgb(243 244 246 / var(--fw-color-opacity)); 238 | --fw-gray-200: rgb(229 231 235 / var(--fw-color-opacity)); 239 | --fw-gray-300: rgb(209 213 219 / var(--fw-color-opacity)); 240 | --fw-gray-400: rgb(156 163 175 / var(--fw-color-opacity)); 241 | --fw-gray-500: rgb(107 114 128 / var(--fw-color-opacity)); 242 | --fw-gray-600: rgb(75 85 99 / var(--fw-color-opacity)); 243 | --fw-gray-700: rgb(55 65 81 / var(--fw-color-opacity)); 244 | --fw-gray-800: rgb(31 41 55 / var(--fw-color-opacity)); 245 | --fw-gray-900: rgb(17 24 39 / var(--fw-color-opacity)); 246 | --fw-gray-950: rgb(3 7 18 / var(--fw-color-opacity)); 247 | --fw-zinc-50: rgb(250 250 250 / var(--fw-color-opacity)); 248 | --fw-zinc-100: rgb(244 244 245 / var(--fw-color-opacity)); 249 | --fw-zinc-200: rgb(228 228 231 / var(--fw-color-opacity)); 250 | --fw-zinc-300: rgb(212 212 216 / var(--fw-color-opacity)); 251 | --fw-zinc-400: rgb(161 161 170 / var(--fw-color-opacity)); 252 | --fw-zinc-500: rgb(113 113 122 / var(--fw-color-opacity)); 253 | --fw-zinc-600: rgb(82 82 91 / var(--fw-color-opacity)); 254 | --fw-zinc-700: rgb(63 63 70 / var(--fw-color-opacity)); 255 | --fw-zinc-800: rgb(39 39 42 / var(--fw-color-opacity)); 256 | --fw-zinc-900: rgb(24 24 27 / var(--fw-color-opacity)); 257 | --fw-zinc-950: rgb(9 9 11 / var(--fw-color-opacity)); 258 | --fw-neutral-50: rgb(250 250 250 / var(--fw-color-opacity)); 259 | --fw-neutral-100: rgb(245 245 245 / var(--fw-color-opacity)); 260 | --fw-neutral-200: rgb(229 229 229 / var(--fw-color-opacity)); 261 | --fw-neutral-300: rgb(212 212 212 / var(--fw-color-opacity)); 262 | --fw-neutral-400: rgb(163 163 163 / var(--fw-color-opacity)); 263 | --fw-neutral-500: rgb(115 115 115 / var(--fw-color-opacity)); 264 | --fw-neutral-600: rgb(82 82 82 / var(--fw-color-opacity)); 265 | --fw-neutral-700: rgb(64 64 64 / var(--fw-color-opacity)); 266 | --fw-neutral-800: rgb(38 38 38 / var(--fw-color-opacity)); 267 | --fw-neutral-900: rgb(23 23 23 / var(--fw-color-opacity)); 268 | --fw-neutral-950: rgb(10 10 10 / var(--fw-color-opacity)); 269 | --fw-stone-50: rgb(250 250 249 / var(--fw-color-opacity)); 270 | --fw-stone-100: rgb(245 245 244 / var(--fw-color-opacity)); 271 | --fw-stone-200: rgb(231 229 228 / var(--fw-color-opacity)); 272 | --fw-stone-300: rgb(214 211 209 / var(--fw-color-opacity)); 273 | --fw-stone-400: rgb(168 162 158 / var(--fw-color-opacity)); 274 | --fw-stone-500: rgb(120 113 108 / var(--fw-color-opacity)); 275 | --fw-stone-600: rgb(87 83 78 / var(--fw-color-opacity)); 276 | --fw-stone-700: rgb(68 64 60 / var(--fw-color-opacity)); 277 | --fw-stone-800: rgb(41 37 36 / var(--fw-color-opacity)); 278 | --fw-stone-900: rgb(28 25 23 / var(--fw-color-opacity)); 279 | --fw-stone-950: rgb(12 10 9 / var(--fw-color-opacity)); 280 | --fw-red-50: rgb(254 242 242 / var(--fw-color-opacity)); 281 | --fw-red-100: rgb(254 226 226 / var(--fw-color-opacity)); 282 | --fw-red-200: rgb(254 202 202 / var(--fw-color-opacity)); 283 | --fw-red-300: rgb(252 165 165 / var(--fw-color-opacity)); 284 | --fw-red-400: rgb(248 113 113 / var(--fw-color-opacity)); 285 | --fw-red-500: rgb(239 68 68 / var(--fw-color-opacity)); 286 | --fw-red-600: rgb(220 38 38 / var(--fw-color-opacity)); 287 | --fw-red-700: rgb(185 28 28 / var(--fw-color-opacity)); 288 | --fw-red-800: rgb(153 27 27 / var(--fw-color-opacity)); 289 | --fw-red-900: rgb(127 29 29 / var(--fw-color-opacity)); 290 | --fw-red-950: rgb(69 10 10 / var(--fw-color-opacity)); 291 | --fw-orange-50: rgb(255 247 237 / var(--fw-color-opacity)); 292 | --fw-orange-100: rgb(255 237 213 / var(--fw-color-opacity)); 293 | --fw-orange-200: rgb(254 215 170 / var(--fw-color-opacity)); 294 | --fw-orange-300: rgb(253 186 116 / var(--fw-color-opacity)); 295 | --fw-orange-400: rgb(251 146 60 / var(--fw-color-opacity)); 296 | --fw-orange-500: rgb(249 115 22 / var(--fw-color-opacity)); 297 | --fw-orange-600: rgb(234 88 12 / var(--fw-color-opacity)); 298 | --fw-orange-700: rgb(194 65 12 / var(--fw-color-opacity)); 299 | --fw-orange-800: rgb(154 52 18 / var(--fw-color-opacity)); 300 | --fw-orange-900: rgb(124 45 18 / var(--fw-color-opacity)); 301 | --fw-orange-950: rgb(67 20 7 / var(--fw-color-opacity)); 302 | --fw-amber-50: rgb(255 251 235 / var(--fw-color-opacity)); 303 | --fw-amber-100: rgb(254 243 199 / var(--fw-color-opacity)); 304 | --fw-amber-200: rgb(253 230 138 / var(--fw-color-opacity)); 305 | --fw-amber-300: rgb(252 211 77 / var(--fw-color-opacity)); 306 | --fw-amber-400: rgb(251 191 36 / var(--fw-color-opacity)); 307 | --fw-amber-500: rgb(245 158 11 / var(--fw-color-opacity)); 308 | --fw-amber-600: rgb(217 119 6 / var(--fw-color-opacity)); 309 | --fw-amber-700: rgb(180 83 9 / var(--fw-color-opacity)); 310 | --fw-amber-800: rgb(146 64 14 / var(--fw-color-opacity)); 311 | --fw-amber-900: rgb(120 53 15 / var(--fw-color-opacity)); 312 | --fw-amber-950: rgb(69 26 3 / var(--fw-color-opacity)); 313 | --fw-yellow-50: rgb(254 252 232 / var(--fw-color-opacity)); 314 | --fw-yellow-100: rgb(254 249 195 / var(--fw-color-opacity)); 315 | --fw-yellow-200: rgb(254 240 138 / var(--fw-color-opacity)); 316 | --fw-yellow-300: rgb(253 224 71 / var(--fw-color-opacity)); 317 | --fw-yellow-400: rgb(250 204 21 / var(--fw-color-opacity)); 318 | --fw-yellow-500: rgb(234 179 8 / var(--fw-color-opacity)); 319 | --fw-yellow-600: rgb(202 138 4 / var(--fw-color-opacity)); 320 | --fw-yellow-700: rgb(161 98 7 / var(--fw-color-opacity)); 321 | --fw-yellow-800: rgb(133 77 14 / var(--fw-color-opacity)); 322 | --fw-yellow-900: rgb(113 63 18 / var(--fw-color-opacity)); 323 | --fw-yellow-950: rgb(66 32 6 / var(--fw-color-opacity)); 324 | --fw-lime-50: rgb(247 254 231 / var(--fw-color-opacity)); 325 | --fw-lime-100: rgb(236 252 203 / var(--fw-color-opacity)); 326 | --fw-lime-200: rgb(217 249 157 / var(--fw-color-opacity)); 327 | --fw-lime-300: rgb(190 242 100 / var(--fw-color-opacity)); 328 | --fw-lime-400: rgb(163 230 53 / var(--fw-color-opacity)); 329 | --fw-lime-500: rgb(132 204 22 / var(--fw-color-opacity)); 330 | --fw-lime-600: rgb(101 163 13 / var(--fw-color-opacity)); 331 | --fw-lime-700: rgb(77 124 15 / var(--fw-color-opacity)); 332 | --fw-lime-800: rgb(63 98 18 / var(--fw-color-opacity)); 333 | --fw-lime-900: rgb(54 83 20 / var(--fw-color-opacity)); 334 | --fw-lime-950: rgb(26 46 5 / var(--fw-color-opacity)); 335 | --fw-green-50: rgb(240 253 244 / var(--fw-color-opacity)); 336 | --fw-green-100: rgb(220 252 231 / var(--fw-color-opacity)); 337 | --fw-green-200: rgb(187 247 208 / var(--fw-color-opacity)); 338 | --fw-green-300: rgb(134 239 172 / var(--fw-color-opacity)); 339 | --fw-green-400: rgb(74 222 128 / var(--fw-color-opacity)); 340 | --fw-green-500: rgb(34 197 94 / var(--fw-color-opacity)); 341 | --fw-green-600: rgb(22 163 74 / var(--fw-color-opacity)); 342 | --fw-green-700: rgb(21 128 61 / var(--fw-color-opacity)); 343 | --fw-green-800: rgb(22 101 52 / var(--fw-color-opacity)); 344 | --fw-green-900: rgb(20 83 45 / var(--fw-color-opacity)); 345 | --fw-green-950: rgb(5 46 22 / var(--fw-color-opacity)); 346 | --fw-emerald-50: rgb(236 253 245 / var(--fw-color-opacity)); 347 | --fw-emerald-100: rgb(209 250 229 / var(--fw-color-opacity)); 348 | --fw-emerald-200: rgb(167 243 208 / var(--fw-color-opacity)); 349 | --fw-emerald-300: rgb(110 231 183 / var(--fw-color-opacity)); 350 | --fw-emerald-400: rgb(52 211 153 / var(--fw-color-opacity)); 351 | --fw-emerald-500: rgb(16 185 129 / var(--fw-color-opacity)); 352 | --fw-emerald-600: rgb(5 150 105 / var(--fw-color-opacity)); 353 | --fw-emerald-700: rgb(4 120 87 / var(--fw-color-opacity)); 354 | --fw-emerald-800: rgb(6 95 70 / var(--fw-color-opacity)); 355 | --fw-emerald-900: rgb(6 78 59 / var(--fw-color-opacity)); 356 | --fw-emerald-950: rgb(2 44 34 / var(--fw-color-opacity)); 357 | --fw-teal-50: rgb(240 253 250 / var(--fw-color-opacity)); 358 | --fw-teal-100: rgb(204 251 241 / var(--fw-color-opacity)); 359 | --fw-teal-200: rgb(153 246 228 / var(--fw-color-opacity)); 360 | --fw-teal-300: rgb(94 234 212 / var(--fw-color-opacity)); 361 | --fw-teal-400: rgb(45 212 191 / var(--fw-color-opacity)); 362 | --fw-teal-500: rgb(20 184 166 / var(--fw-color-opacity)); 363 | --fw-teal-600: rgb(13 148 136 / var(--fw-color-opacity)); 364 | --fw-teal-700: rgb(15 118 110 / var(--fw-color-opacity)); 365 | --fw-teal-800: rgb(17 94 89 / var(--fw-color-opacity)); 366 | --fw-teal-900: rgb(19 78 74 / var(--fw-color-opacity)); 367 | --fw-teal-950: rgb(4 47 46 / var(--fw-color-opacity)); 368 | --fw-cyan-50: rgb(236 254 255 / var(--fw-color-opacity)); 369 | --fw-cyan-100: rgb(207 250 254 / var(--fw-color-opacity)); 370 | --fw-cyan-200: rgb(165 243 252 / var(--fw-color-opacity)); 371 | --fw-cyan-300: rgb(103 232 249 / var(--fw-color-opacity)); 372 | --fw-cyan-400: rgb(34 211 238 / var(--fw-color-opacity)); 373 | --fw-cyan-500: rgb(6 182 212 / var(--fw-color-opacity)); 374 | --fw-cyan-600: rgb(8 145 178 / var(--fw-color-opacity)); 375 | --fw-cyan-700: rgb(14 116 144 / var(--fw-color-opacity)); 376 | --fw-cyan-800: rgb(21 94 117 / var(--fw-color-opacity)); 377 | --fw-cyan-900: rgb(22 78 99 / var(--fw-color-opacity)); 378 | --fw-cyan-950: rgb(8 51 68 / var(--fw-color-opacity)); 379 | --fw-sky-50: rgb(240 249 255 / var(--fw-color-opacity)); 380 | --fw-sky-100: rgb(224 242 254 / var(--fw-color-opacity)); 381 | --fw-sky-200: rgb(186 230 253 / var(--fw-color-opacity)); 382 | --fw-sky-300: rgb(125 211 252 / var(--fw-color-opacity)); 383 | --fw-sky-400: rgb(56 189 248 / var(--fw-color-opacity)); 384 | --fw-sky-500: rgb(14 165 233 / var(--fw-color-opacity)); 385 | --fw-sky-600: rgb(2 132 199 / var(--fw-color-opacity)); 386 | --fw-sky-700: rgb(3 105 161 / var(--fw-color-opacity)); 387 | --fw-sky-800: rgb(7 89 133 / var(--fw-color-opacity)); 388 | --fw-sky-900: rgb(12 74 110 / var(--fw-color-opacity)); 389 | --fw-sky-950: rgb(8 47 73 / var(--fw-color-opacity)); 390 | --fw-blue-50: rgb(239 246 255 / var(--fw-color-opacity)); 391 | --fw-blue-100: rgb(219 234 254 / var(--fw-color-opacity)); 392 | --fw-blue-200: rgb(191 219 254 / var(--fw-color-opacity)); 393 | --fw-blue-300: rgb(147 197 253 / var(--fw-color-opacity)); 394 | --fw-blue-400: rgb(96 165 250 / var(--fw-color-opacity)); 395 | --fw-blue-500: rgb(59 130 246 / var(--fw-color-opacity)); 396 | --fw-blue-600: rgb(37 99 235 / var(--fw-color-opacity)); 397 | --fw-blue-700: rgb(29 78 216 / var(--fw-color-opacity)); 398 | --fw-blue-800: rgb(30 64 175 / var(--fw-color-opacity)); 399 | --fw-blue-900: rgb(30 58 138 / var(--fw-color-opacity)); 400 | --fw-blue-950: rgb(23 37 84 / var(--fw-color-opacity)); 401 | --fw-indigo-50: rgb(238 242 255 / var(--fw-color-opacity)); 402 | --fw-indigo-100: rgb(224 231 255 / var(--fw-color-opacity)); 403 | --fw-indigo-200: rgb(199 210 254 / var(--fw-color-opacity)); 404 | --fw-indigo-300: rgb(165 180 252 / var(--fw-color-opacity)); 405 | --fw-indigo-400: rgb(129 140 248 / var(--fw-color-opacity)); 406 | --fw-indigo-500: rgb(99 102 241 / var(--fw-color-opacity)); 407 | --fw-indigo-600: rgb(79 70 229 / var(--fw-color-opacity)); 408 | --fw-indigo-700: rgb(67 56 202 / var(--fw-color-opacity)); 409 | --fw-indigo-800: rgb(55 48 163 / var(--fw-color-opacity)); 410 | --fw-indigo-900: rgb(49 46 129 / var(--fw-color-opacity)); 411 | --fw-indigo-950: rgb(30 27 75 / var(--fw-color-opacity)); 412 | --fw-violet-50: rgb(245 243 255 / var(--fw-color-opacity)); 413 | --fw-violet-100: rgb(237 233 254 / var(--fw-color-opacity)); 414 | --fw-violet-200: rgb(221 214 254 / var(--fw-color-opacity)); 415 | --fw-violet-300: rgb(196 181 253 / var(--fw-color-opacity)); 416 | --fw-violet-400: rgb(167 139 250 / var(--fw-color-opacity)); 417 | --fw-violet-500: rgb(139 92 246 / var(--fw-color-opacity)); 418 | --fw-violet-600: rgb(124 58 237 / var(--fw-color-opacity)); 419 | --fw-violet-700: rgb(109 40 217 / var(--fw-color-opacity)); 420 | --fw-violet-800: rgb(91 33 182 / var(--fw-color-opacity)); 421 | --fw-violet-900: rgb(76 29 149 / var(--fw-color-opacity)); 422 | --fw-violet-950: rgb(46 16 101 / var(--fw-color-opacity)); 423 | --fw-purple-50: rgb(250 245 255 / var(--fw-color-opacity)); 424 | --fw-purple-100: rgb(243 232 255 / var(--fw-color-opacity)); 425 | --fw-purple-200: rgb(233 213 255 / var(--fw-color-opacity)); 426 | --fw-purple-300: rgb(216 180 254 / var(--fw-color-opacity)); 427 | --fw-purple-400: rgb(192 132 252 / var(--fw-color-opacity)); 428 | --fw-purple-500: rgb(168 85 247 / var(--fw-color-opacity)); 429 | --fw-purple-600: rgb(147 51 234 / var(--fw-color-opacity)); 430 | --fw-purple-700: rgb(126 34 206 / var(--fw-color-opacity)); 431 | --fw-purple-800: rgb(107 33 168 / var(--fw-color-opacity)); 432 | --fw-purple-900: rgb(88 28 135 / var(--fw-color-opacity)); 433 | --fw-purple-950: rgb(59 7 100 / var(--fw-color-opacity)); 434 | --fw-fuchsia-50: rgb(253 244 255 / var(--fw-color-opacity)); 435 | --fw-fuchsia-100: rgb(250 232 255 / var(--fw-color-opacity)); 436 | --fw-fuchsia-200: rgb(245 208 254 / var(--fw-color-opacity)); 437 | --fw-fuchsia-300: rgb(240 171 252 / var(--fw-color-opacity)); 438 | --fw-fuchsia-400: rgb(232 121 249 / var(--fw-color-opacity)); 439 | --fw-fuchsia-500: rgb(217 70 239 / var(--fw-color-opacity)); 440 | --fw-fuchsia-600: rgb(192 38 211 / var(--fw-color-opacity)); 441 | --fw-fuchsia-700: rgb(162 28 175 / var(--fw-color-opacity)); 442 | --fw-fuchsia-800: rgb(134 25 143 / var(--fw-color-opacity)); 443 | --fw-fuchsia-900: rgb(112 26 117 / var(--fw-color-opacity)); 444 | --fw-fuchsia-950: rgb(74 4 78 / var(--fw-color-opacity)); 445 | --fw-pink-50: rgb(253 242 248 / var(--fw-color-opacity)); 446 | --fw-pink-100: rgb(252 231 243 / var(--fw-color-opacity)); 447 | --fw-pink-200: rgb(251 207 232 / var(--fw-color-opacity)); 448 | --fw-pink-300: rgb(249 168 212 / var(--fw-color-opacity)); 449 | --fw-pink-400: rgb(244 114 182 / var(--fw-color-opacity)); 450 | --fw-pink-500: rgb(236 72 153 / var(--fw-color-opacity)); 451 | --fw-pink-600: rgb(219 39 119 / var(--fw-color-opacity)); 452 | --fw-pink-700: rgb(190 24 93 / var(--fw-color-opacity)); 453 | --fw-pink-800: rgb(157 23 77 / var(--fw-color-opacity)); 454 | --fw-pink-900: rgb(131 24 67 / var(--fw-color-opacity)); 455 | --fw-pink-950: rgb(80 7 36 / var(--fw-color-opacity)); 456 | --fw-rose-50: rgb(255 241 242 / var(--fw-color-opacity)); 457 | --fw-rose-100: rgb(255 228 230 / var(--fw-color-opacity)); 458 | --fw-rose-200: rgb(254 205 211 / var(--fw-color-opacity)); 459 | --fw-rose-300: rgb(253 164 175 / var(--fw-color-opacity)); 460 | --fw-rose-400: rgb(251 113 133 / var(--fw-color-opacity)); 461 | --fw-rose-500: rgb(244 63 94 / var(--fw-color-opacity)); 462 | --fw-rose-600: rgb(225 29 72 / var(--fw-color-opacity)); 463 | --fw-rose-700: rgb(190 18 60 / var(--fw-color-opacity)); 464 | --fw-rose-800: rgb(159 18 57 / var(--fw-color-opacity)); 465 | --fw-rose-900: rgb(136 19 55 / var(--fw-color-opacity)); 466 | --fw-rose-950: rgb(76 5 25 / var(--fw-color-opacity)); 467 | } 468 | 469 | @keyframes fw-spin { 470 | from { 471 | transform: rotate(0deg); 472 | } 473 | to { 474 | transform: rotate(360deg); 475 | } 476 | } 477 | @keyframes fw-ping { 478 | 75%, 100% { 479 | transform: scale(2); 480 | opacity: 0; 481 | } 482 | } 483 | @keyframes fw-pulse { 484 | 0%, 100% { 485 | opacity: 1; 486 | } 487 | 50% { 488 | opacity: 0.5; 489 | } 490 | } 491 | @keyframes fw-bounce { 492 | 0%, 100% { 493 | transform: translateY(-25%); 494 | animation-timing-function: cubic-bezier(0.8, 0, 1, 1); 495 | } 496 | 50% { 497 | transform: translateY(0); 498 | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); 499 | } 500 | } 501 | 502 | /*# sourceMappingURL=freewindcss.css.map */ 503 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🍃 Freewind CSS 2 | 3 | Use Tailwind's set values and units without installing Tailwind. 4 | 5 | Bring the conventional units prepared by Tailwind in the usual way of writing CSS. 6 | 7 | ## Installation 8 | 9 | Install with npm: 10 | 11 | ```shell 12 | npm install freewindcss 13 | ``` 14 | 15 | Install with yarn: 16 | 17 | ```shell 18 | yarn add freewindcss 19 | ``` 20 | 21 | Install using a CDN link in your HTML file: 22 | 23 | ```html 24 | 25 | ``` 26 | 27 | ## Examples 28 | 29 | ```scss 30 | .element { 31 | width: var(--fw-4); // 1rem 32 | height: var(--fw-2); // 0.5rem 33 | margin: 0 auto var(--fw-2); // 0 auto 0.5rem 34 | font-size: var(--fw-text-sm); // 0.875rem 35 | line-height: var(--fw-leading-relaxed); // 1.625 36 | font-weight: var(--fw-font-thin); // 100 37 | background: var(--fw-indigo-400); // rgb(129, 140, 248) 38 | border-radius: var(--fw-rounded-md); // 0.375rem 39 | box-shadow: var(--fw-shadow-sm); // 0 1px 2px 0 rgb(0 0 0 / 0.05) 40 | transition: var(--fw-ease-in-out); // cubic-bezier(0.4, 0, 0.2, 1) 41 | } 42 | ``` 43 | 44 | #### See a live demo on [Codesandbox.io](https://codesandbox.io/s/freewindcss-pfq17e) 45 | 46 | ## Documentation 47 | 48 | 49 |
50 | Index 51 | 52 | - [Sizing and Spacing](#sizing-and-spacing) 53 | - [Negative sizing values](#negative-sizing-and-spacing-values) 54 | - [Font Family](#font-family) 55 | - [Font Size](#font-size) 56 | - [Font Weight](#font-weight) 57 | - [Letter Spacing](#letter-spacing) 58 | - [Line Height](#line-height) 59 | - [Border Radius](#border-radius) 60 | - [Box Shadow](#box-shadow) 61 | - [Blur Filter](#blur-filter) 62 | - [Drop Shadow](#drop-shadow) 63 | - [Columns](#columns) 64 | - [Transition Timing](#transition-timing) 65 | - [Colors](#colors) 66 | - [Colors transparency (alpha)](#colors-transparency-alpha) 67 | - [Animations](#animations) 68 | - [Container Width](#container-width) 69 |
70 | 71 | 72 | ### Sizing and Spacing 73 | #### Useful with the following properties; `margin`, `padding`, `height`, `width`, `top`, `right`, `bottom`, `left` Etc. for example: 74 | ```scss 75 | element { 76 | right: var(--fw-2); // 8px 77 | width: var(--fw-10); // 40px 78 | padding: var(--fw-2) var(--fw-4); // 8px 16px 79 | } 80 | ``` 81 | 82 |
83 | Variables 84 | 85 | ```css 86 | --fw-auto: auto; // auto 87 | --fw-full: 100%; // 100% 88 | --fw-0: 0; // 0px 89 | --fw-0\5: 0.125rem; // 2px 90 | --fw-1: 0.25rem; // 4px 91 | --fw-1\5: 0.375rem; // 6px 92 | --fw-2: 0.5rem; // 8px 93 | --fw-2\5: 0.625rem; // 10px 94 | --fw-3: 0.75rem; // 12px 95 | --fw-3\5: 0.875rem; // 14px 96 | --fw-4: 1rem; // 16px 97 | --fw-4\5: 1.125rem; // 18px 98 | --fw-5: 1.25rem; // 20px 99 | --fw-6: 1.5rem; // 24px 100 | --fw-7: 1.75rem; // 28px 101 | --fw-8: 2rem; // 32px 102 | --fw-9: 2.25rem; // 36px 103 | --fw-10: 2.5rem; // 40px 104 | --fw-11: 2.75rem; // 44px 105 | --fw-12: 3rem; // 48px 106 | --fw-13: 3.25rem; // 52px 107 | --fw-14: 3.5rem; // 56px 108 | --fw-15: 3.75rem; // 60px 109 | --fw-16: 4rem; // 64px 110 | --fw-17: 4.25rem; // 68px 111 | --fw-18: 4.5rem; // 72px 112 | --fw-19: 4.75rem; // 76px 113 | --fw-20: 5rem; // 80px 114 | --fw-24: 6rem; // 96px 115 | --fw-28: 7rem; // 112px 116 | --fw-32: 8rem; // 128px 117 | --fw-36: 9rem; // 144px 118 | --fw-40: 10rem; // 160px 119 | --fw-44: 11rem; // 176px 120 | --fw-48: 12rem; // 192px 121 | --fw-52: 13rem; // 208px 122 | --fw-56: 14rem; // 224px 123 | --fw-60: 15rem; // 240px 124 | --fw-64: 16rem; // 256px 125 | --fw-72: 18rem; // 288px 126 | --fw-80: 20rem; // 320px 127 | --fw-96: 24rem; // 384px 128 | ``` 129 |
130 | 131 | #### Negative sizing and spacing values 132 | For negative size values just use the previous variables with a double - before the variable id: 133 | `--fw--1`, `--wf--1\5`, `--wf--full` and so on. 134 | 135 | ### Font Family 136 | #### Can be used with the `font-family` property, for example: 137 | ```scss 138 | element { 139 | font-family: var(--fw-font-serif); // ui-serif, Georgia, Cambria, "Times New Roman", Times, serif 140 | } 141 | ``` 142 | 143 |
144 | Variables 145 | 146 | ```scss 147 | --fw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 148 | --fw-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 149 | --fw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 150 | ``` 151 |
152 | 153 | ### Font Size 154 | #### Can be used with the `font-size` property, for example: 155 | ```scss 156 | element { 157 | font-size: var(--fw-text-2xl); // 1.5rem 158 | } 159 | ``` 160 | 161 |
162 | Variables 163 | 164 | ```scss 165 | --fw-text-xs: 0.75rem; 166 | --fw-text-sm: 0.875rem; 167 | --fw-text-base: 1rem; 168 | --fw-text-lg: 1.125rem; 169 | --fw-text-xl: 1.25rem; 170 | --fw-text-2xl: 1.5rem; 171 | --fw-text-3xl: 1.875rem; 172 | --fw-text-4xl: 2.25rem; 173 | --fw-text-5xl: 3rem; 174 | --fw-text-6xl: 4rem; 175 | ``` 176 |
177 | 178 | ### Font Weight 179 | #### For example: 180 | ```scss 181 | element { 182 | font-weight: var(--fw-font-semibold); // 600 183 | } 184 | ``` 185 | 186 |
187 | Variables 188 | 189 | ```scss 190 | --fw-font-thin: 100; 191 | --fw-font-extralight: 200; 192 | --fw-font-light: 300; 193 | --fw-font-normal: 400; 194 | --fw-font-medium: 500; 195 | --fw-font-semibold: 600; 196 | --fw-font-bold: 700; 197 | --fw-font-extrabold: 800; 198 | --fw-font-black: 900; 199 | ``` 200 |
201 | 202 | ### Letter Spacing 203 | #### Using with `letter-spacing` property, for example: 204 | ```scss 205 | element { 206 | letter-spacing: var(--fw-tracking-tight); // -0.025em 207 | } 208 | ``` 209 | 210 |
211 | Variables 212 | 213 | ```scss 214 | --fw-tracking-tighter: -0.05em; 215 | --fw-tracking-tight: -0.025em; 216 | --fw-tracking-normal: 0; 217 | --fw-tracking-wide: 0.025em; 218 | --fw-tracking-wider: 0.05em; 219 | --fw-tracking-widest: 0.1em; 220 | ``` 221 |
222 | 223 | ### Line Height 224 | #### Used with `line-height` property, for example: 225 | ```scss 226 | element { 227 | line-height: var(--fw-leading-5); // 20px 228 | } 229 | ``` 230 | 231 |
232 | Variables 233 | 234 | ```scss 235 | --fw-leading-3: 0.75rem; // 12px 236 | --fw-leading-4: 1rem; // 16px 237 | --fw-leading-5: 1.25rem; // 20px 238 | --fw-leading-6: 1.5rem; // 24px 239 | --fw-leading-7: 1.75rem; // 28px 240 | --fw-leading-8: 2rem; // 32px 241 | --fw-leading-9: 2.25rem; // 36px 242 | --fw-leading-10: 2.5rem; // 40px 243 | --fw-leading-none: 1; 244 | --fw-leading-tight: 1.25; 245 | --fw-leading-snug: 1.375; 246 | --fw-leading-normal: 1.5; 247 | --fw-leading-relaxed: 1.625; 248 | --fw-leading-loose: 2; 249 | ``` 250 |
251 | 252 | ### Border Radius 253 | #### For example: 254 | ```scss 255 | element { 256 | border-radius: var(--fw-rounded-md); // 6px 257 | } 258 | ``` 259 | 260 |
261 | Variables 262 | 263 | ```scss 264 | --fw-rounded-none: 0px; // 0px 265 | --fw-rounded-sm: 0.125rem; // 2px 266 | --fw-rounded: 0.25rem; // 4px 267 | --fw-rounded-md: 0.375rem; // 6px 268 | --fw-rounded-lg: 0.5rem; // 8px 269 | --fw-rounded-xl: 0.75rem; // 12px 270 | --fw-rounded-2xl: 1rem; // 16px 271 | --fw-rounded-3xl: 1.5rem; // 24px 272 | --fw-rounded-full: 9999px; // 9999px 273 | ``` 274 |
275 | 276 | ### Box Shadow 277 | #### For example: 278 | ```scss 279 | element { 280 | box-shadow: var(--fw-shadow-lg); // 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) 281 | } 282 | ``` 283 | 284 |
285 | Variables 286 | 287 | ```scss 288 | --fw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); 289 | --fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 290 | --fw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 291 | --fw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 292 | --fw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); 293 | --fw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); 294 | --fw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); 295 | --fw-shadow-none: 0 0 #0000; 296 | ``` 297 |
298 | 299 | ### Blur Filter 300 | #### Used with `filter: blur(x)` or with ` backdrop-filter: blur(x)`, for example: 301 | ```scss 302 | element { 303 | backdrop-filter: var(--fw-blur-md); // blur(12px) 304 | } 305 | ``` 306 | 307 |
308 | Variables 309 | 310 | ```scss 311 | --fw-blur-none: blur(0); 312 | --fw-blur-sm: blur(4px); 313 | --fw-blur: blur(8px); 314 | --fw-blur-md: blur(12px); 315 | --fw-blur-lg: blur(16px); 316 | --fw-blur-xl: blur(24px); 317 | --fw-blur-2xl: blur(40px); 318 | --fw-blur-3xl: blur(64px); 319 | ``` 320 |
321 | 322 | ### Drop Shadow 323 | #### Used with `filter: drop-shadow(x)`, for example: 324 | ```scss 325 | element { 326 | filter: var(--fw-drop-shadow-sm); // drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) 327 | } 328 | ``` 329 | 330 |
331 | Variables 332 | 333 | ```scss 334 | --fw-drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); 335 | --fw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 336 | --fw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 337 | --fw-drop-shadow-lg: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); 338 | --fw-drop-shadow-xl: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); 339 | --fw-drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); 340 | --fw-drop-shadow-none: drop-shadow(0 0 #0000); 341 | ``` 342 |
343 | 344 | ### Columns 345 | #### example: 346 | ```scss 347 | element { 348 | columns: var(--fw-columns-3xl); // 768px 349 | } 350 | ``` 351 | 352 |
353 | Variables 354 | 355 | ```scss 356 | --fw-columns-3xs: 16rem; // 256px 357 | --fw-columns-2xs: 18rem; // 288px 358 | --fw-columns-xs: 20rem; // 320px 359 | --fw-columns-sm: 24rem; // 384px 360 | --fw-columns-md: 28rem; // 448px 361 | --fw-columns-lg: 32rem; // 512px 362 | --fw-columns-xl: 36rem; // 576px 363 | --fw-columns-2xl: 42rem; // 672px 364 | --fw-columns-3xl: 48rem; // 768px 365 | --fw-columns-4xl: 56rem; // 896px 366 | --fw-columns-5xl: 64rem; // 1024px 367 | --fw-columns-6xl: 72rem; // 1152px 368 | --fw-columns-7xl: 80rem; // 1280px 369 | ``` 370 |
371 | 372 | ### Transition Timing 373 | #### example: 374 | ```scss 375 | element { 376 | transition-timing-function: var(--fw-ease-out); // cubic-bezier(0, 0, 0.2, 1) 377 | } 378 | ``` 379 | 380 |
381 | Variables 382 | 383 | ```scss 384 | --fw-ease-linear: linear; 385 | --fw-ease-in: cubic-bezier(0.4, 0, 1, 1); 386 | --fw-ease-out: cubic-bezier(0, 0, 0.2, 1); 387 | --fw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 388 | ``` 389 |
390 | 391 | ### Colors 392 | #### example: 393 | ```scss 394 | element { 395 | color: var(--fw-slate-100); // rgb(241 245 249) 396 | background: var(--fw-fuchsia-500); // rgb(217 70 239) 397 | } 398 | ``` 399 | 400 |
401 | Variables 402 | 403 | ```clojure 404 | --fw-black: rgb(0 0 0); // #000000 405 | --fw-white: rgb(255 255 255); // #ffffff 406 | --fw-slate-50: rgb(248 250 252); // #f8fafc 407 | --fw-slate-100: rgb(241 245 249); // #f1f5f9 408 | --fw-slate-200: rgb(226 232 240); // #e2e8f0 409 | --fw-slate-300: rgb(203 213 225); // #cbd5e1 410 | --fw-slate-400: rgb(148 163 184); // #94a3b8 411 | --fw-slate-500: rgb(100 116 139); // #64748b 412 | --fw-slate-600: rgb(71 85 105); // #475569 413 | --fw-slate-700: rgb(51 65 85); // #334155 414 | --fw-slate-800: rgb(30 41 59); // #1e293b 415 | --fw-slate-900: rgb(15 23 42); // #0f172a 416 | --fw-slate-950: rgb(2 6 23); // #020617 417 | --fw-gray-50: rgb(249 250 251); // #f9fafb 418 | --fw-gray-100: rgb(243 244 246); // #f3f4f6 419 | --fw-gray-200: rgb(229 231 235); // #e5e7eb 420 | --fw-gray-300: rgb(209 213 219); // #d1d5db 421 | --fw-gray-400: rgb(156 163 175); // #9ca3af 422 | --fw-gray-500: rgb(107 114 128); // #6b7280 423 | --fw-gray-600: rgb(75 85 99); // #4b5563 424 | --fw-gray-700: rgb(55 65 81); // #374151 425 | --fw-gray-800: rgb(31 41 55); // #1f2937 426 | --fw-gray-900: rgb(17 24 39); // #111827 427 | --fw-gray-950: rgb(3 7 18); // #030712 428 | --fw-zinc-50: rgb(250 250 250); // #fafafa 429 | --fw-zinc-100: rgb(244 244 245); // #f4f4f5 430 | --fw-zinc-200: rgb(228 228 231); // #e4e4e7 431 | --fw-zinc-300: rgb(212 212 216); // #d4d4d8 432 | --fw-zinc-400: rgb(161 161 170); // #a1a1aa 433 | --fw-zinc-500: rgb(113 113 122); // #71717a 434 | --fw-zinc-600: rgb(82 82 91); // #52525b 435 | --fw-zinc-700: rgb(63 63 70); // #3f3f46 436 | --fw-zinc-800: rgb(39 39 42); // #27272a 437 | --fw-zinc-900: rgb(24 24 27); // #18181b 438 | --fw-zinc-950: rgb(9 9 11); // #09090b 439 | --fw-neutral-50: rgb(250 250 250); // #fafafa 440 | --fw-neutral-100: rgb(245 245 245); // #f5f5f5 441 | --fw-neutral-200: rgb(229 229 229); // #e5e5e5 442 | --fw-neutral-300: rgb(212 212 212); // #d4d4d4 443 | --fw-neutral-400: rgb(163 163 163); // #a3a3a3 444 | --fw-neutral-500: rgb(115 115 115); // #737373 445 | --fw-neutral-600: rgb(82 82 82); // #525252 446 | --fw-neutral-700: rgb(64 64 64); // #404040 447 | --fw-neutral-800: rgb(38 38 38); // #262626 448 | --fw-neutral-900: rgb(23 23 23); // #171717 449 | --fw-neutral-950: rgb(10 10 10); // #0a0a0a 450 | --fw-stone-50: rgb(250 250 249); // #fafaf9 451 | --fw-stone-100: rgb(245 245 244); // #f5f5f4 452 | --fw-stone-200: rgb(231 229 228); // #e7e5e4 453 | --fw-stone-300: rgb(214 211 209); // #d6d3d1 454 | --fw-stone-400: rgb(168 162 158); // #a8a29e 455 | --fw-stone-500: rgb(120 113 108); // #78716c 456 | --fw-stone-600: rgb(87 83 78); // #57534e 457 | --fw-stone-700: rgb(68 64 60); // #44403c 458 | --fw-stone-800: rgb(41 37 36); // #292524 459 | --fw-stone-900: rgb(28 25 23); // #1c1917 460 | --fw-stone-950: rgb(12 10 9); // #0c0a09 461 | --fw-red-50: rgb(254 242 242); // #fef2f2 462 | --fw-red-100: rgb(254 226 226); // #fee2e2 463 | --fw-red-200: rgb(254 202 202); // #fecaca 464 | --fw-red-300: rgb(252 165 165); // #fca5a5 465 | --fw-red-400: rgb(248 113 113); // #f87171 466 | --fw-red-500: rgb(239 68 68); // #ef4444 467 | --fw-red-600: rgb(220 38 38); // #dc2626 468 | --fw-red-700: rgb(185 28 28); // #b91c1c 469 | --fw-red-800: rgb(153 27 27); // #991b1b 470 | --fw-red-900: rgb(127 29 29); // #7f1d1d 471 | --fw-red-950: rgb(69 10 10); // #450a0a 472 | --fw-orange-50: rgb(255 247 237); // #fff7ed 473 | --fw-orange-100: rgb(255 237 213); // #ffedd5 474 | --fw-orange-200: rgb(254 215 170); // #fed7aa 475 | --fw-orange-300: rgb(253 186 116); // #fdba74 476 | --fw-orange-400: rgb(251 146 60); // #fb923c 477 | --fw-orange-500: rgb(249 115 22); // #f97316 478 | --fw-orange-600: rgb(234 88 12); // #ea580c 479 | --fw-orange-700: rgb(194 65 12); // #c2410c 480 | --fw-orange-800: rgb(154 52 18); // #9a3412 481 | --fw-orange-900: rgb(124 45 18); // #7c2d12 482 | --fw-orange-950: rgb(67 20 7); // #431407 483 | --fw-amber-50: rgb(255 251 235); // #fffbeb 484 | --fw-amber-100: rgb(254 243 199); // #fef3c7 485 | --fw-amber-200: rgb(253 230 138); // #fde68a 486 | --fw-amber-300: rgb(252 211 77); // #fcd34d 487 | --fw-amber-400: rgb(251 191 36); // #fbbf24 488 | --fw-amber-500: rgb(245 158 11); // #f59e0b 489 | --fw-amber-600: rgb(217 119 6); // #d97706 490 | --fw-amber-700: rgb(180 83 9); // #b45309 491 | --fw-amber-800: rgb(146 64 14); // #92400e 492 | --fw-amber-900: rgb(120 53 15); // #78350f 493 | --fw-amber-950: rgb(69 26 3); // #451800 494 | --fw-yellow-50: rgb(254 252 232); // #fefce8 495 | --fw-yellow-100: rgb(254 249 195); // #fef9c3 496 | --fw-yellow-200: rgb(254 240 138); // #fef08a 497 | --fw-yellow-300: rgb(253 224 71); // #fde047 498 | --fw-yellow-400: rgb(250 204 21); // #facc15 499 | --fw-yellow-500: rgb(234 179 8); // #eab308 500 | --fw-yellow-600: rgb(202 138 4); // #ca8a04 501 | --fw-yellow-700: rgb(161 98 7); // #a16207 502 | --fw-yellow-800: rgb(133 77 14); // #854d0e 503 | --fw-yellow-900: rgb(113 63 18); // #713f12 504 | --fw-yellow-950: rgb(66 32 6); // #422006 505 | --fw-lime-50: rgb(247 254 231); // #f7fee7 506 | --fw-lime-100: rgb(236 252 203); // #ecfccb 507 | --fw-lime-200: rgb(217 249 157); // #d9f99d 508 | --fw-lime-300: rgb(190 242 100); // #bef264 509 | --fw-lime-400: rgb(163 230 53); // #a3e635 510 | --fw-lime-500: rgb(132 204 22); // #84cc16 511 | --fw-lime-600: rgb(101 163 13); // #65a30d 512 | --fw-lime-700: rgb(77 124 15); // #4d7c0f 513 | --fw-lime-800: rgb(63 98 18); // #3f6212 514 | --fw-lime-900: rgb(54 83 20); // #365314 515 | --fw-lime-950: rgb(26 46 5); // #1a2e05 516 | --fw-green-50: rgb(240 253 244); // #f0fdf4 517 | --fw-green-100: rgb(220 252 231); // #dcfce7 518 | --fw-green-200: rgb(187 247 208); // #bbf7d0 519 | --fw-green-300: rgb(134 239 172); // #86efac 520 | --fw-green-400: rgb(74 222 128); // #4ade80 521 | --fw-green-500: rgb(34 197 94); // #22c55e 522 | --fw-green-600: rgb(22 163 74); // #16a34a 523 | --fw-green-700: rgb(21 128 61); // #15803d 524 | --fw-green-800: rgb(22 101 52); // #166534 525 | --fw-green-900: rgb(20 83 45); // #14532d 526 | --fw-green-950: rgb(5 46 22); // #052e16 527 | --fw-emerald-50: rgb(236 253 245); // #ecfdf5 528 | --fw-emerald-100: rgb(209 250 229); // #d1fae5 529 | --fw-emerald-200: rgb(167 243 208); // #a7f3d0 530 | --fw-emerald-300: rgb(110 231 183); // #6ee7b7 531 | --fw-emerald-400: rgb(52 211 153); // #34d399 532 | --fw-emerald-500: rgb(16 185 129); // #10b981 533 | --fw-emerald-600: rgb(5 150 105); // #059669 534 | --fw-emerald-700: rgb(4 120 87); // #047857 535 | --fw-emerald-800: rgb(6 95 70); // #065f46 536 | --fw-emerald-900: rgb(6 78 59); // #064e3b 537 | --fw-emerald-950: rgb(2 44 34); // #022c22 538 | --fw-teal-50: rgb(240 253 250); // #f0fdfa 539 | --fw-teal-100: rgb(204 251 241); // #ccfbf1 540 | --fw-teal-200: rgb(153 246 228); // #99f6e4 541 | --fw-teal-300: rgb(94 234 212); // #5eead4 542 | --fw-teal-400: rgb(45 212 191); // #2dd4bf 543 | --fw-teal-500: rgb(20 184 166); // #14b8a6 544 | --fw-teal-600: rgb(13 148 136); // #0d9488 545 | --fw-teal-700: rgb(15 118 110); // #0f766e 546 | --fw-teal-800: rgb(17 94 89); // #115e59 547 | --fw-teal-900: rgb(19 78 74); // #134e4a 548 | --fw-teal-950: rgb(4 47 46); // #042f2e 549 | --fw-cyan-50: rgb(236 254 255); // #ecfeff 550 | --fw-cyan-100: rgb(207 250 254); // #cffafe 551 | --fw-cyan-200: rgb(165 243 252); // #a5f3fc 552 | --fw-cyan-300: rgb(103 232 249); // #67e8f9 553 | --fw-cyan-400: rgb(34 211 238); // #22d3ee 554 | --fw-cyan-500: rgb(6 182 212); // #06b6d4 555 | --fw-cyan-600: rgb(8 145 178); // #0891b2 556 | --fw-cyan-700: rgb(14 116 144); // #0e7490 557 | --fw-cyan-800: rgb(21 94 117); // #155e75 558 | --fw-cyan-900: rgb(22 78 99); // #164e63 559 | --fw-cyan-950: rgb(8 51 68); // #083344 560 | --fw-sky-50: rgb(240 249 255); // #f0f9ff 561 | --fw-sky-100: rgb(224 242 254); // #e0f2fe 562 | --fw-sky-200: rgb(186 230 253); // #bae6fd 563 | --fw-sky-300: rgb(125 211 252); // #7dd3fc 564 | --fw-sky-400: rgb(56 189 248); // #38bdf8 565 | --fw-sky-500: rgb(14 165 233); // #0ea5e9 566 | --fw-sky-600: rgb(2 132 199); // #0284c7 567 | --fw-sky-700: rgb(3 105 161); // #0369a1 568 | --fw-sky-800: rgb(7 89 133); // #075985 569 | --fw-sky-900: rgb(12 74 110); // #0c4a6e 570 | --fw-sky-950: rgb(8 47 73); // #082f49 571 | --fw-blue-50: rgb(239 246 255); // #eff6ff 572 | --fw-blue-100: rgb(219 234 254); // #dbeafe 573 | --fw-blue-200: rgb(191 219 254); // #bfdbfe 574 | --fw-blue-300: rgb(147 197 253); // #93c5fd 575 | --fw-blue-400: rgb(96 165 250); // #60a5fa 576 | --fw-blue-500: rgb(59 130 246); // #3b82f6 577 | --fw-blue-600: rgb(37 99 235); // #2563eb 578 | --fw-blue-700: rgb(29 78 216); // #1d4ed8 579 | --fw-blue-800: rgb(30 64 175); // #1e40af 580 | --fw-blue-900: rgb(30 58 138); // #1e3a8a 581 | --fw-blue-950: rgb(23 37 84); // #172554 582 | --fw-indigo-50: rgb(238 242 255); // #eef2ff 583 | --fw-indigo-100: rgb(224 231 255); // #e0e7ff 584 | --fw-indigo-200: rgb(199 210 254); // #c7d2fe 585 | --fw-indigo-300: rgb(165 180 252); // #a5b4fc 586 | --fw-indigo-400: rgb(129 140 248); // #818cf8 587 | --fw-indigo-500: rgb(99 102 241); // #6366f1 588 | --fw-indigo-600: rgb(79 70 229); // #4f46e5 589 | --fw-indigo-700: rgb(67 56 202); // #4338ca 590 | --fw-indigo-800: rgb(55 48 163); // #3730a3 591 | --fw-indigo-900: rgb(49 46 129); // #312e81 592 | --fw-indigo-950: rgb(30 27 75); // #1e1b4b 593 | --fw-violet-50: rgb(245 243 255); // #f5f3ff 594 | --fw-violet-100: rgb(237 233 254); // #ede9fe 595 | --fw-violet-200: rgb(221 214 254); // #ddd6fe 596 | --fw-violet-300: rgb(196 181 253); // #c4b5fd 597 | --fw-violet-400: rgb(167 139 250); // #a78bfa 598 | --fw-violet-500: rgb(139 92 246); // #8b5cf6 599 | --fw-violet-600: rgb(124 58 237); // #7c3aed 600 | --fw-violet-700: rgb(109 40 217); // #6d28d9 601 | --fw-violet-800: rgb(91 33 182); // #5b21b6 602 | --fw-violet-900: rgb(76 29 149); // #4c1d95 603 | --fw-violet-950: rgb(46 16 101); // #2e1065 604 | --fw-purple-50: rgb(250 245 255); // #faf5ff 605 | --fw-purple-100: rgb(243 232 255); // #f3e8ff 606 | --fw-purple-200: rgb(233 213 255); // #e9d5ff 607 | --fw-purple-300: rgb(216 180 254); // #d8b4fe 608 | --fw-purple-400: rgb(192 132 252); // #c084fc 609 | --fw-purple-500: rgb(168 85 247); // #a855f7 610 | --fw-purple-600: rgb(147 51 234); // #9333ea 611 | --fw-purple-700: rgb(126 34 206); // #7e22ce 612 | --fw-purple-800: rgb(107 33 168); // #6b21a8 613 | --fw-purple-900: rgb(88 28 135); // #581c87 614 | --fw-purple-950: rgb(59 7 100); // #3b0764 615 | --fw-fuchsia-50: rgb(253 244 255); // #fdf4ff 616 | --fw-fuchsia-100: rgb(250 232 255); // #fae8ff 617 | --fw-fuchsia-200: rgb(245 208 254); // #f5d0fe 618 | --fw-fuchsia-300: rgb(240 171 252); // #f0abfc 619 | --fw-fuchsia-400: rgb(232 121 249); // #e879f9 620 | --fw-fuchsia-500: rgb(217 70 239); // #d946ef 621 | --fw-fuchsia-600: rgb(192 38 211); // #c026d3 622 | --fw-fuchsia-700: rgb(162 28 175); // #a21caf 623 | --fw-fuchsia-800: rgb(134 25 143); // #86198f 624 | --fw-fuchsia-900: rgb(112 26 117); // #701a75 625 | --fw-fuchsia-950: rgb(74 4 78); // #4a044e 626 | --fw-pink-50: rgb(253 242 248); // #fdf2f8 627 | --fw-pink-100: rgb(252 231 243); // #fce7f3 628 | --fw-pink-200: rgb(251 207 232); // #fbcfe8 629 | --fw-pink-300: rgb(249 168 212); // #f9a8d4 630 | --fw-pink-400: rgb(244 114 182); // #f472b6 631 | --fw-pink-500: rgb(236 72 153); // #ec4899 632 | --fw-pink-600: rgb(219 39 119); // #db2777 633 | --fw-pink-700: rgb(190 24 93); // #be185d 634 | --fw-pink-800: rgb(157 23 77); // #9d174d 635 | --fw-pink-900: rgb(131 24 67); // #831843 636 | --fw-pink-950: rgb(80 7 36); // #500724 637 | --fw-rose-50: rgb(255 241 242); // #fff1f2 638 | --fw-rose-100: rgb(255 228 230); // #ffe4e6 639 | --fw-rose-200: rgb(254 205 211); // #fecdd3 640 | --fw-rose-300: rgb(253 164 175); // #fda4af 641 | --fw-rose-400: rgb(251 113 133); // #fb7185 642 | --fw-rose-500: rgb(244 63 94); // #f43f5e 643 | --fw-rose-600: rgb(225 29 72); // #e11d48 644 | --fw-rose-700: rgb(190 18 60); // #be123c 645 | --fw-rose-800: rgb(159 18 57); // #9f1239 646 | --fw-rose-900: rgb(136 19 55); // #881337 647 | --fw-rose-950: rgb(76 5 25); // #4c0519 648 | ``` 649 |
650 | 651 | ### Colors transparency (alpha) 652 | #### Use ```--fw-color-opacity``` variable to set the color transparency 653 | 654 | Each color rule in Freewindcss uses the ```--fw-color-opacity``` variable (which is initialized to 1) to determine the transparency of the color. Therefore to apply a color with transparency you have to set the variable ```--fw-color-opacity``` to the desired fraction number. 655 | 656 | Note that the variable ```--fw-color-opacity``` will be applied to the entire defined element, so two Freewindcss color rules cannot be applied to the same element with different transparency. 657 | 658 | #### example: 659 | ```scss 660 | element { 661 | --fw-color-opacity: 0.6; 662 | color: var(--fw-indigo-500); // rgba(99, 102, 241, 0.6) 663 | background-color: var(--fw-lime-300); // rgba(190, 242, 100, 0.6); 664 | } 665 | ``` 666 | 667 | ### Animations 668 | #### example: 669 | ```scss 670 | element { 671 | animation: var(--fw-animation-pulse); // fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 672 | } 673 | ``` 674 | 675 |
676 | Variables 677 | 678 | ```scss 679 | --fw-animation-spin: fw-spin 1s linear infinite; 680 | --fw-animation-ping: fw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; 681 | --fw-animation-pulse: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 682 | --fw-animation-bounce: fw-bounce 1s infinite; 683 | ``` 684 |
685 | 686 | ### Container Width 687 | #### Can be used with the `width` or `max-width`, for example: 688 | ```scss 689 | element { 690 | width: 100%; 691 | max-width: var(--fw-container-width); 692 | } 693 | ``` 694 | 695 | The value of `--fw-container-width` will depend on the screen size: 696 | ```scss 697 | @media (max-width: 640px) { 698 | --fw-container-width: 640px; 699 | } 700 | 701 | @media (max-width: 768px) { 702 | --fw-container-width: 768px; 703 | } 704 | 705 | @media (max-width: 1024px) { 706 | --fw-container-width: 1024px; 707 | } 708 | 709 | // or in a bigger screen: 710 | --fw-container-width: 1280px; 711 | ``` 712 | -------------------------------------------------------------------------------- /src/freewindcss.scss: -------------------------------------------------------------------------------- 1 | // Freewindcss v0.0.14 2 | // https://github.com/zvizvi/freewindcss#readme 3 | // 4 | // Copyright (c) 2023 zvizvi 5 | // Licensed under the MIT license 6 | 7 | :root { 8 | /* sizing and spacing */ 9 | --fw-auto: auto; // auto 10 | --fw-full: 100%; // 100% 11 | 12 | --fw-0: 0; // 0px 13 | --fw-0\5: 0.125rem; // 2px 14 | --fw-1: 0.25rem; // 4px 15 | --fw-1\5: 0.375rem; // 6px 16 | --fw-2: 0.5rem; // 8px 17 | --fw-2\5: 0.625rem; // 10px 18 | --fw-3: 0.75rem; // 12px 19 | --fw-3\5: 0.875rem; // 14px 20 | --fw-4: 1rem; // 16px 21 | --fw-4\5: 1.125rem; // 18px 22 | --fw-5: 1.25rem; // 20px 23 | --fw-6: 1.5rem; // 24px 24 | --fw-7: 1.75rem; // 28px 25 | --fw-8: 2rem; // 32px 26 | --fw-9: 2.25rem; // 36px 27 | --fw-10: 2.5rem; // 40px 28 | --fw-11: 2.75rem; // 44px 29 | --fw-12: 3rem; // 48px 30 | --fw-13: 3.25rem; // 52px 31 | --fw-14: 3.5rem; // 56px 32 | --fw-15: 3.75rem; // 60px 33 | --fw-16: 4rem; // 64px 34 | --fw-17: 4.25rem; // 68px 35 | --fw-18: 4.5rem; // 72px 36 | --fw-19: 4.75rem; // 76px 37 | --fw-20: 5rem; // 80px 38 | --fw-24: 6rem; // 96px 39 | --fw-28: 7rem; // 112px 40 | --fw-32: 8rem; // 128px 41 | --fw-36: 9rem; // 144px 42 | --fw-40: 10rem; // 160px 43 | --fw-44: 11rem; // 176px 44 | --fw-48: 12rem; // 192px 45 | --fw-52: 13rem; // 208px 46 | --fw-56: 14rem; // 224px 47 | --fw-60: 15rem; // 240px 48 | --fw-64: 16rem; // 256px 49 | --fw-72: 18rem; // 288px 50 | --fw-80: 20rem; // 320px 51 | --fw-96: 24rem; // 384px 52 | 53 | /* negative sizing and spacing */ 54 | --fw--full: -100%; // -100% 55 | 56 | --fw--0\5: -0.125rem; // -2px 57 | --fw--1: -0.25rem; // -4px 58 | --fw--1\5: -0.375rem; // -6px 59 | --fw--2: -0.5rem; // -8px 60 | --fw--2\5: -0.625rem; // -10px 61 | --fw--3: -0.75rem; // -12px 62 | --fw--3\5: -0.875rem; // -14px 63 | --fw--4: -1rem; // -16px 64 | --fw--4\5: -1.125rem; // -18px 65 | --fw--5: -1.25rem; // -20px 66 | --fw--6: -1.5rem; // -24px 67 | --fw--7: -1.75rem; // -28px 68 | --fw--8: -2rem; // -32px 69 | --fw--9: -2.25rem; // -36px 70 | --fw--10: -2.5rem; // -40px 71 | --fw--11: -2.75rem; // -44px 72 | --fw--12: -3rem; // -48px 73 | --fw--13: -3.25rem; // -52px 74 | --fw--14: -3.5rem; // -56px 75 | --fw--15: -3.75rem; // -60px 76 | --fw--16: -4rem; // -64px 77 | --fw--17: -4.25rem; // -68px 78 | --fw--18: -4.5rem; // -72px 79 | --fw--19: -4.75rem; // -76px 80 | --fw--20: -5rem; // -80px 81 | --fw--24: -6rem; // -96px 82 | --fw--28: -7rem; // -112px 83 | --fw--32: -8rem; // -128px 84 | --fw--36: -9rem; // -144px 85 | --fw--40: -10rem; // -160px 86 | --fw--44: -11rem; // -176px 87 | --fw--48: -12rem; // -192px 88 | --fw--52: -13rem; // -208px 89 | --fw--56: -14rem; // -224px 90 | --fw--60: -15rem; // -240px 91 | --fw--64: -16rem; // -256px 92 | --fw--72: -18rem; // -288px 93 | --fw--80: -20rem; // -320px 94 | --fw--96: -24rem; // -384px 95 | 96 | /* font family */ 97 | --fw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 98 | --fw-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 99 | --fw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 100 | 101 | /* font sizes */ 102 | --fw-text-xs: 0.75rem; 103 | --fw-text-sm: 0.875rem; 104 | --fw-text-base: 1rem; 105 | --fw-text-lg: 1.125rem; 106 | --fw-text-xl: 1.25rem; 107 | --fw-text-2xl: 1.5rem; 108 | --fw-text-3xl: 1.875rem; 109 | --fw-text-4xl: 2.25rem; 110 | --fw-text-5xl: 3rem; 111 | --fw-text-6xl: 4rem; 112 | 113 | /* font weight */ 114 | --fw-font-thin: 100; 115 | --fw-font-extralight: 200; 116 | --fw-font-light: 300; 117 | --fw-font-normal: 400; 118 | --fw-font-medium: 500; 119 | --fw-font-semibold: 600; 120 | --fw-font-bold: 700; 121 | --fw-font-extrabold: 800; 122 | --fw-font-black: 900; 123 | 124 | /* letter spacing */ 125 | --fw-tracking-tighter: -0.05em; 126 | --fw-tracking-tight: -0.025em; 127 | --fw-tracking-normal: 0; 128 | --fw-tracking-wide: 0.025em; 129 | --fw-tracking-wider: 0.05em; 130 | --fw-tracking-widest: 0.1em; 131 | 132 | /* line height */ 133 | --fw-leading-3: 0.75rem; // 12px 134 | --fw-leading-4: 1rem; // 16px 135 | --fw-leading-5: 1.25rem; // 20px 136 | --fw-leading-6: 1.5rem; // 24px 137 | --fw-leading-7: 1.75rem; // 28px 138 | --fw-leading-8: 2rem; // 32px 139 | --fw-leading-9: 2.25rem; // 36px 140 | --fw-leading-10: 2.5rem; // 40px 141 | --fw-leading-none: 1; 142 | --fw-leading-tight: 1.25; 143 | --fw-leading-snug: 1.375; 144 | --fw-leading-normal: 1.5; 145 | --fw-leading-relaxed: 1.625; 146 | --fw-leading-loose: 2; 147 | 148 | /* border radius */ 149 | --fw-rounded-none: 0px; // 0px 150 | --fw-rounded-sm: 0.125rem; // 2px 151 | --fw-rounded: 0.25rem; // 4px 152 | --fw-rounded-md: 0.375rem; // 6px 153 | --fw-rounded-lg: 0.5rem; // 8px 154 | --fw-rounded-xl: 0.75rem; // 12px 155 | --fw-rounded-2xl: 1rem; // 16px 156 | --fw-rounded-3xl: 1.5rem; // 24px 157 | --fw-rounded-full: 9999px; // 9999px 158 | 159 | /* box shadow */ 160 | --fw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); 161 | --fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 162 | --fw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 163 | --fw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 164 | --fw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); 165 | --fw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); 166 | --fw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); 167 | --fw-shadow-none: 0 0 #0000; 168 | 169 | /* filter blur/backdrop-blur */ 170 | --fw-blur-none: blur(0); 171 | --fw-blur-sm: blur(4px); 172 | --fw-blur: blur(8px); 173 | --fw-blur-md: blur(12px); 174 | --fw-blur-lg: blur(16px); 175 | --fw-blur-xl: blur(24px); 176 | --fw-blur-2xl: blur(40px); 177 | --fw-blur-3xl: blur(64px); 178 | 179 | /* filter drop-shadow */ 180 | --fw-drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); 181 | --fw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 182 | --fw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 183 | --fw-drop-shadow-lg: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); 184 | --fw-drop-shadow-xl: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); 185 | --fw-drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); 186 | --fw-drop-shadow-none: drop-shadow(0 0 #0000); 187 | 188 | /* transition timing */ 189 | --fw-ease-linear: linear; 190 | --fw-ease-in: cubic-bezier(0.4, 0, 1, 1); 191 | --fw-ease-out: cubic-bezier(0, 0, 0.2, 1); 192 | --fw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 193 | 194 | /* columns */ 195 | --fw-columns-3xs: 16rem; // 256px 196 | --fw-columns-2xs: 18rem; // 288px 197 | --fw-columns-xs: 20rem; // 320px 198 | --fw-columns-sm: 24rem; // 384px 199 | --fw-columns-md: 28rem; // 448px 200 | --fw-columns-lg: 32rem; // 512px 201 | --fw-columns-xl: 36rem; // 576px 202 | --fw-columns-2xl: 42rem; // 672px 203 | --fw-columns-3xl: 48rem; // 768px 204 | --fw-columns-4xl: 56rem; // 896px 205 | --fw-columns-5xl: 64rem; // 1024px 206 | --fw-columns-6xl: 72rem; // 1152px 207 | --fw-columns-7xl: 80rem; // 1280px 208 | 209 | /* animation */ 210 | --fw-animation-spin: fw-spin 1s linear infinite; 211 | --fw-animation-ping: fw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; 212 | --fw-animation-pulse: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 213 | --fw-animation-bounce: fw-bounce 1s infinite; 214 | 215 | /* container width */ 216 | --fw-container-width: 1280px; 217 | 218 | @media (max-width: 1024px) { 219 | --fw-container-width: 1024px; 220 | } 221 | 222 | @media (max-width: 768px) { 223 | --fw-container-width: 768px; 224 | } 225 | 226 | @media (max-width: 640px) { 227 | --fw-container-width: 640px; 228 | } 229 | } 230 | 231 | * { 232 | /* colors */ 233 | --fw-color-opacity: 1; 234 | // 235 | --fw-black: rgb(0 0 0 / var(--fw-color-opacity)); // rgb(0 0 0) 236 | --fw-white: rgb(255 255 255 / var(--fw-color-opacity)); // rgb(255 255 255) 237 | --fw-slate-50: rgb(248 250 252 / var(--fw-color-opacity)); // rgb(248 250 252) 238 | --fw-slate-100: rgb(241 245 249 / var(--fw-color-opacity)); // rgb(241 245 249) 239 | --fw-slate-200: rgb(226 232 240 / var(--fw-color-opacity)); // rgb(226 232 240) 240 | --fw-slate-300: rgb(203 213 225 / var(--fw-color-opacity)); // rgb(203 213 225) 241 | --fw-slate-400: rgb(148 163 184 / var(--fw-color-opacity)); // rgb(148 163 184) 242 | --fw-slate-500: rgb(100 116 139 / var(--fw-color-opacity)); // rgb(100 116 139) 243 | --fw-slate-600: rgb(71 85 105 / var(--fw-color-opacity)); // rgb(71 85 105) 244 | --fw-slate-700: rgb(51 65 85 / var(--fw-color-opacity)); // rgb(51 65 85) 245 | --fw-slate-800: rgb(30 41 59 / var(--fw-color-opacity)); // rgb(30 41 59) 246 | --fw-slate-900: rgb(15 23 42 / var(--fw-color-opacity)); // rgb(15 23 42) 247 | --fw-slate-950: rgb(2 6 23 / var(--fw-color-opacity)); // rgb(2 6 23) 248 | --fw-gray-50: rgb(249 250 251 / var(--fw-color-opacity)); // rgb(249 250 251) 249 | --fw-gray-100: rgb(243 244 246 / var(--fw-color-opacity)); // rgb(243 244 246) 250 | --fw-gray-200: rgb(229 231 235 / var(--fw-color-opacity)); // rgb(229 231 235) 251 | --fw-gray-300: rgb(209 213 219 / var(--fw-color-opacity)); // rgb(209 213 219) 252 | --fw-gray-400: rgb(156 163 175 / var(--fw-color-opacity)); // rgb(156 163 175) 253 | --fw-gray-500: rgb(107 114 128 / var(--fw-color-opacity)); // rgb(107 114 128) 254 | --fw-gray-600: rgb(75 85 99 / var(--fw-color-opacity)); // rgb(75 85 99) 255 | --fw-gray-700: rgb(55 65 81 / var(--fw-color-opacity)); // rgb(55 65 81) 256 | --fw-gray-800: rgb(31 41 55 / var(--fw-color-opacity)); // rgb(31 41 55) 257 | --fw-gray-900: rgb(17 24 39 / var(--fw-color-opacity)); // rgb(17 24 39) 258 | --fw-gray-950: rgb(3 7 18 / var(--fw-color-opacity)); // rgb(3 7 18) 259 | --fw-zinc-50: rgb(250 250 250 / var(--fw-color-opacity)); // rgb(250 250 250) 260 | --fw-zinc-100: rgb(244 244 245 / var(--fw-color-opacity)); // rgb(244 244 245) 261 | --fw-zinc-200: rgb(228 228 231 / var(--fw-color-opacity)); // rgb(228 228 231) 262 | --fw-zinc-300: rgb(212 212 216 / var(--fw-color-opacity)); // rgb(212 212 216) 263 | --fw-zinc-400: rgb(161 161 170 / var(--fw-color-opacity)); // rgb(161 161 170) 264 | --fw-zinc-500: rgb(113 113 122 / var(--fw-color-opacity)); // rgb(113 113 122) 265 | --fw-zinc-600: rgb(82 82 91 / var(--fw-color-opacity)); // rgb(82 82 91) 266 | --fw-zinc-700: rgb(63 63 70 / var(--fw-color-opacity)); // rgb(63 63 70) 267 | --fw-zinc-800: rgb(39 39 42 / var(--fw-color-opacity)); // rgb(39 39 42) 268 | --fw-zinc-900: rgb(24 24 27 / var(--fw-color-opacity)); // rgb(24 24 27) 269 | --fw-zinc-950: rgb(9 9 11 / var(--fw-color-opacity)); // rgb(9 9 11) 270 | --fw-neutral-50: rgb(250 250 250 / var(--fw-color-opacity)); // rgb(250 250 250) 271 | --fw-neutral-100: rgb(245 245 245 / var(--fw-color-opacity)); // rgb(245 245 245) 272 | --fw-neutral-200: rgb(229 229 229 / var(--fw-color-opacity)); // rgb(229 229 229) 273 | --fw-neutral-300: rgb(212 212 212 / var(--fw-color-opacity)); // rgb(212 212 212) 274 | --fw-neutral-400: rgb(163 163 163 / var(--fw-color-opacity)); // rgb(163 163 163) 275 | --fw-neutral-500: rgb(115 115 115 / var(--fw-color-opacity)); // rgb(115 115 115) 276 | --fw-neutral-600: rgb(82 82 82 / var(--fw-color-opacity)); // rgb(82 82 82) 277 | --fw-neutral-700: rgb(64 64 64 / var(--fw-color-opacity)); // rgb(64 64 64) 278 | --fw-neutral-800: rgb(38 38 38 / var(--fw-color-opacity)); // rgb(38 38 38) 279 | --fw-neutral-900: rgb(23 23 23 / var(--fw-color-opacity)); // rgb(23 23 23) 280 | --fw-neutral-950: rgb(10 10 10 / var(--fw-color-opacity)); // rgb(10 10 10) 281 | --fw-stone-50: rgb(250 250 249 / var(--fw-color-opacity)); // rgb(250 250 249) 282 | --fw-stone-100: rgb(245 245 244 / var(--fw-color-opacity)); // rgb(245 245 244) 283 | --fw-stone-200: rgb(231 229 228 / var(--fw-color-opacity)); // rgb(231 229 228) 284 | --fw-stone-300: rgb(214 211 209 / var(--fw-color-opacity)); // rgb(214 211 209) 285 | --fw-stone-400: rgb(168 162 158 / var(--fw-color-opacity)); // rgb(168 162 158) 286 | --fw-stone-500: rgb(120 113 108 / var(--fw-color-opacity)); // rgb(120 113 108) 287 | --fw-stone-600: rgb(87 83 78 / var(--fw-color-opacity)); // rgb(87 83 78) 288 | --fw-stone-700: rgb(68 64 60 / var(--fw-color-opacity)); // rgb(68 64 60) 289 | --fw-stone-800: rgb(41 37 36 / var(--fw-color-opacity)); // rgb(41 37 36) 290 | --fw-stone-900: rgb(28 25 23 / var(--fw-color-opacity)); // rgb(28 25 23) 291 | --fw-stone-950: rgb(12 10 9 / var(--fw-color-opacity)); // rgb(12 10 9) 292 | --fw-red-50: rgb(254 242 242 / var(--fw-color-opacity)); // rgb(254 242 242) 293 | --fw-red-100: rgb(254 226 226 / var(--fw-color-opacity)); // rgb(254 226 226) 294 | --fw-red-200: rgb(254 202 202 / var(--fw-color-opacity)); // rgb(254 202 202) 295 | --fw-red-300: rgb(252 165 165 / var(--fw-color-opacity)); // rgb(252 165 165) 296 | --fw-red-400: rgb(248 113 113 / var(--fw-color-opacity)); // rgb(248 113 113) 297 | --fw-red-500: rgb(239 68 68 / var(--fw-color-opacity)); // rgb(239 68 68) 298 | --fw-red-600: rgb(220 38 38 / var(--fw-color-opacity)); // rgb(220 38 38) 299 | --fw-red-700: rgb(185 28 28 / var(--fw-color-opacity)); // rgb(185 28 28) 300 | --fw-red-800: rgb(153 27 27 / var(--fw-color-opacity)); // rgb(153 27 27) 301 | --fw-red-900: rgb(127 29 29 / var(--fw-color-opacity)); // rgb(127 29 29) 302 | --fw-red-950: rgb(69 10 10 / var(--fw-color-opacity)); // rgb(69 10 10) 303 | --fw-orange-50: rgb(255 247 237 / var(--fw-color-opacity)); // rgb(255 247 237) 304 | --fw-orange-100: rgb(255 237 213 / var(--fw-color-opacity)); // rgb(255 237 213) 305 | --fw-orange-200: rgb(254 215 170 / var(--fw-color-opacity)); // rgb(254 215 170) 306 | --fw-orange-300: rgb(253 186 116 / var(--fw-color-opacity)); // rgb(253 186 116) 307 | --fw-orange-400: rgb(251 146 60 / var(--fw-color-opacity)); // rgb(251 146 60) 308 | --fw-orange-500: rgb(249 115 22 / var(--fw-color-opacity)); // rgb(249 115 22) 309 | --fw-orange-600: rgb(234 88 12 / var(--fw-color-opacity)); // rgb(234 88 12) 310 | --fw-orange-700: rgb(194 65 12 / var(--fw-color-opacity)); // rgb(194 65 12) 311 | --fw-orange-800: rgb(154 52 18 / var(--fw-color-opacity)); // rgb(154 52 18) 312 | --fw-orange-900: rgb(124 45 18 / var(--fw-color-opacity)); // rgb(124 45 18) 313 | --fw-orange-950: rgb(67 20 7 / var(--fw-color-opacity)); // rgb(67 20 7) 314 | --fw-amber-50: rgb(255 251 235 / var(--fw-color-opacity)); // rgb(255 251 235) 315 | --fw-amber-100: rgb(254 243 199 / var(--fw-color-opacity)); // rgb(254 243 199) 316 | --fw-amber-200: rgb(253 230 138 / var(--fw-color-opacity)); // rgb(253 230 138) 317 | --fw-amber-300: rgb(252 211 77 / var(--fw-color-opacity)); // rgb(252 211 77) 318 | --fw-amber-400: rgb(251 191 36 / var(--fw-color-opacity)); // rgb(251 191 36) 319 | --fw-amber-500: rgb(245 158 11 / var(--fw-color-opacity)); // rgb(245 158 11) 320 | --fw-amber-600: rgb(217 119 6 / var(--fw-color-opacity)); // rgb(217 119 6) 321 | --fw-amber-700: rgb(180 83 9 / var(--fw-color-opacity)); // rgb(180 83 9) 322 | --fw-amber-800: rgb(146 64 14 / var(--fw-color-opacity)); // rgb(146 64 14) 323 | --fw-amber-900: rgb(120 53 15 / var(--fw-color-opacity)); // rgb(120 53 15) 324 | --fw-amber-950: rgb(69 26 3 / var(--fw-color-opacity)); // rgb(69 26 3) 325 | --fw-yellow-50: rgb(254 252 232 / var(--fw-color-opacity)); // rgb(254 252 232) 326 | --fw-yellow-100: rgb(254 249 195 / var(--fw-color-opacity)); // rgb(254 249 195) 327 | --fw-yellow-200: rgb(254 240 138 / var(--fw-color-opacity)); // rgb(254 240 138) 328 | --fw-yellow-300: rgb(253 224 71 / var(--fw-color-opacity)); // rgb(253 224 71) 329 | --fw-yellow-400: rgb(250 204 21 / var(--fw-color-opacity)); // rgb(250 204 21) 330 | --fw-yellow-500: rgb(234 179 8 / var(--fw-color-opacity)); // rgb(234 179 8) 331 | --fw-yellow-600: rgb(202 138 4 / var(--fw-color-opacity)); // rgb(202 138 4) 332 | --fw-yellow-700: rgb(161 98 7 / var(--fw-color-opacity)); // rgb(161 98 7) 333 | --fw-yellow-800: rgb(133 77 14 / var(--fw-color-opacity)); // rgb(133 77 14) 334 | --fw-yellow-900: rgb(113 63 18 / var(--fw-color-opacity)); // rgb(113 63 18) 335 | --fw-yellow-950: rgb(66 32 6 / var(--fw-color-opacity)); // rgb(66 32 6) 336 | --fw-lime-50: rgb(247 254 231 / var(--fw-color-opacity)); // rgb(247 254 231) 337 | --fw-lime-100: rgb(236 252 203 / var(--fw-color-opacity)); // rgb(236 252 203) 338 | --fw-lime-200: rgb(217 249 157 / var(--fw-color-opacity)); // rgb(217 249 157) 339 | --fw-lime-300: rgb(190 242 100 / var(--fw-color-opacity)); // rgb(190 242 100) 340 | --fw-lime-400: rgb(163 230 53 / var(--fw-color-opacity)); // rgb(163 230 53) 341 | --fw-lime-500: rgb(132 204 22 / var(--fw-color-opacity)); // rgb(132 204 22) 342 | --fw-lime-600: rgb(101 163 13 / var(--fw-color-opacity)); // rgb(101 163 13) 343 | --fw-lime-700: rgb(77 124 15 / var(--fw-color-opacity)); // rgb(77 124 15) 344 | --fw-lime-800: rgb(63 98 18 / var(--fw-color-opacity)); // rgb(63 98 18) 345 | --fw-lime-900: rgb(54 83 20 / var(--fw-color-opacity)); // rgb(54 83 20) 346 | --fw-lime-950: rgb(26 46 5 / var(--fw-color-opacity)); // rgb(26 46 5) 347 | --fw-green-50: rgb(240 253 244 / var(--fw-color-opacity)); // rgb(240 253 244) 348 | --fw-green-100: rgb(220 252 231 / var(--fw-color-opacity)); // rgb(220 252 231) 349 | --fw-green-200: rgb(187 247 208 / var(--fw-color-opacity)); // rgb(187 247 208) 350 | --fw-green-300: rgb(134 239 172 / var(--fw-color-opacity)); // rgb(134 239 172) 351 | --fw-green-400: rgb(74 222 128 / var(--fw-color-opacity)); // rgb(74 222 128) 352 | --fw-green-500: rgb(34 197 94 / var(--fw-color-opacity)); // rgb(34 197 94) 353 | --fw-green-600: rgb(22 163 74 / var(--fw-color-opacity)); // rgb(22 163 74) 354 | --fw-green-700: rgb(21 128 61 / var(--fw-color-opacity)); // rgb(21 128 61) 355 | --fw-green-800: rgb(22 101 52 / var(--fw-color-opacity)); // rgb(22 101 52) 356 | --fw-green-900: rgb(20 83 45 / var(--fw-color-opacity)); // rgb(20 83 45) 357 | --fw-green-950: rgb(5 46 22 / var(--fw-color-opacity)); // rgb(5 46 22) 358 | --fw-emerald-50: rgb(236 253 245 / var(--fw-color-opacity)); // rgb(236 253 245) 359 | --fw-emerald-100: rgb(209 250 229 / var(--fw-color-opacity)); // rgb(209 250 229) 360 | --fw-emerald-200: rgb(167 243 208 / var(--fw-color-opacity)); // rgb(167 243 208) 361 | --fw-emerald-300: rgb(110 231 183 / var(--fw-color-opacity)); // rgb(110 231 183) 362 | --fw-emerald-400: rgb(52 211 153 / var(--fw-color-opacity)); // rgb(52 211 153) 363 | --fw-emerald-500: rgb(16 185 129 / var(--fw-color-opacity)); // rgb(16 185 129) 364 | --fw-emerald-600: rgb(5 150 105 / var(--fw-color-opacity)); // rgb(5 150 105) 365 | --fw-emerald-700: rgb(4 120 87 / var(--fw-color-opacity)); // rgb(4 120 87) 366 | --fw-emerald-800: rgb(6 95 70 / var(--fw-color-opacity)); // rgb(6 95 70) 367 | --fw-emerald-900: rgb(6 78 59 / var(--fw-color-opacity)); // rgb(6 78 59) 368 | --fw-emerald-950: rgb(2 44 34 / var(--fw-color-opacity)); // rgb(2 44 34) 369 | --fw-teal-50: rgb(240 253 250 / var(--fw-color-opacity)); // rgb(240 253 250) 370 | --fw-teal-100: rgb(204 251 241 / var(--fw-color-opacity)); // rgb(204 251 241) 371 | --fw-teal-200: rgb(153 246 228 / var(--fw-color-opacity)); // rgb(153 246 228) 372 | --fw-teal-300: rgb(94 234 212 / var(--fw-color-opacity)); // rgb(94 234 212) 373 | --fw-teal-400: rgb(45 212 191 / var(--fw-color-opacity)); // rgb(45 212 191) 374 | --fw-teal-500: rgb(20 184 166 / var(--fw-color-opacity)); // rgb(20 184 166) 375 | --fw-teal-600: rgb(13 148 136 / var(--fw-color-opacity)); // rgb(13 148 136) 376 | --fw-teal-700: rgb(15 118 110 / var(--fw-color-opacity)); // rgb(15 118 110) 377 | --fw-teal-800: rgb(17 94 89 / var(--fw-color-opacity)); // rgb(17 94 89) 378 | --fw-teal-900: rgb(19 78 74 / var(--fw-color-opacity)); // rgb(19 78 74) 379 | --fw-teal-950: rgb(4 47 46 / var(--fw-color-opacity)); // rgb(4 47 46) 380 | --fw-cyan-50: rgb(236 254 255 / var(--fw-color-opacity)); // rgb(236 254 255) 381 | --fw-cyan-100: rgb(207 250 254 / var(--fw-color-opacity)); // rgb(207 250 254) 382 | --fw-cyan-200: rgb(165 243 252 / var(--fw-color-opacity)); // rgb(165 243 252) 383 | --fw-cyan-300: rgb(103 232 249 / var(--fw-color-opacity)); // rgb(103 232 249) 384 | --fw-cyan-400: rgb(34 211 238 / var(--fw-color-opacity)); // rgb(34 211 238) 385 | --fw-cyan-500: rgb(6 182 212 / var(--fw-color-opacity)); // rgb(6 182 212) 386 | --fw-cyan-600: rgb(8 145 178 / var(--fw-color-opacity)); // rgb(8 145 178) 387 | --fw-cyan-700: rgb(14 116 144 / var(--fw-color-opacity)); // rgb(14 116 144) 388 | --fw-cyan-800: rgb(21 94 117 / var(--fw-color-opacity)); // rgb(21 94 117) 389 | --fw-cyan-900: rgb(22 78 99 / var(--fw-color-opacity)); // rgb(22 78 99) 390 | --fw-cyan-950: rgb(8 51 68 / var(--fw-color-opacity)); // rgb(8 51 68) 391 | --fw-sky-50: rgb(240 249 255 / var(--fw-color-opacity)); // rgb(240 249 255) 392 | --fw-sky-100: rgb(224 242 254 / var(--fw-color-opacity)); // rgb(224 242 254) 393 | --fw-sky-200: rgb(186 230 253 / var(--fw-color-opacity)); // rgb(186 230 253) 394 | --fw-sky-300: rgb(125 211 252 / var(--fw-color-opacity)); // rgb(125 211 252) 395 | --fw-sky-400: rgb(56 189 248 / var(--fw-color-opacity)); // rgb(56 189 248) 396 | --fw-sky-500: rgb(14 165 233 / var(--fw-color-opacity)); // rgb(14 165 233) 397 | --fw-sky-600: rgb(2 132 199 / var(--fw-color-opacity)); // rgb(2 132 199) 398 | --fw-sky-700: rgb(3 105 161 / var(--fw-color-opacity)); // rgb(3 105 161) 399 | --fw-sky-800: rgb(7 89 133 / var(--fw-color-opacity)); // rgb(7 89 133) 400 | --fw-sky-900: rgb(12 74 110 / var(--fw-color-opacity)); // rgb(12 74 110) 401 | --fw-sky-950: rgb(8 47 73 / var(--fw-color-opacity)); // rgb(8 47 73) 402 | --fw-blue-50: rgb(239 246 255 / var(--fw-color-opacity)); // rgb(239 246 255) 403 | --fw-blue-100: rgb(219 234 254 / var(--fw-color-opacity)); // rgb(219 234 254) 404 | --fw-blue-200: rgb(191 219 254 / var(--fw-color-opacity)); // rgb(191 219 254) 405 | --fw-blue-300: rgb(147 197 253 / var(--fw-color-opacity)); // rgb(147 197 253) 406 | --fw-blue-400: rgb(96 165 250 / var(--fw-color-opacity)); // rgb(96 165 250) 407 | --fw-blue-500: rgb(59 130 246 / var(--fw-color-opacity)); // rgb(59 130 246) 408 | --fw-blue-600: rgb(37 99 235 / var(--fw-color-opacity)); // rgb(37 99 235) 409 | --fw-blue-700: rgb(29 78 216 / var(--fw-color-opacity)); // rgb(29 78 216) 410 | --fw-blue-800: rgb(30 64 175 / var(--fw-color-opacity)); // rgb(30 64 175) 411 | --fw-blue-900: rgb(30 58 138 / var(--fw-color-opacity)); // rgb(30 58 138) 412 | --fw-blue-950: rgb(23 37 84 / var(--fw-color-opacity)); // rgb(23 37 84) 413 | --fw-indigo-50: rgb(238 242 255 / var(--fw-color-opacity)); // rgb(238 242 255) 414 | --fw-indigo-100: rgb(224 231 255 / var(--fw-color-opacity)); // rgb(224 231 255) 415 | --fw-indigo-200: rgb(199 210 254 / var(--fw-color-opacity)); // rgb(199 210 254) 416 | --fw-indigo-300: rgb(165 180 252 / var(--fw-color-opacity)); // rgb(165 180 252) 417 | --fw-indigo-400: rgb(129 140 248 / var(--fw-color-opacity)); // rgb(129 140 248) 418 | --fw-indigo-500: rgb(99 102 241 / var(--fw-color-opacity)); // rgb(99 102 241) 419 | --fw-indigo-600: rgb(79 70 229 / var(--fw-color-opacity)); // rgb(79 70 229) 420 | --fw-indigo-700: rgb(67 56 202 / var(--fw-color-opacity)); // rgb(67 56 202) 421 | --fw-indigo-800: rgb(55 48 163 / var(--fw-color-opacity)); // rgb(55 48 163) 422 | --fw-indigo-900: rgb(49 46 129 / var(--fw-color-opacity)); // rgb(49 46 129) 423 | --fw-indigo-950: rgb(30 27 75 / var(--fw-color-opacity)); // rgb(30 27 75) 424 | --fw-violet-50: rgb(245 243 255 / var(--fw-color-opacity)); // rgb(245 243 255) 425 | --fw-violet-100: rgb(237 233 254 / var(--fw-color-opacity)); // rgb(237 233 254) 426 | --fw-violet-200: rgb(221 214 254 / var(--fw-color-opacity)); // rgb(221 214 254) 427 | --fw-violet-300: rgb(196 181 253 / var(--fw-color-opacity)); // rgb(196 181 253) 428 | --fw-violet-400: rgb(167 139 250 / var(--fw-color-opacity)); // rgb(167 139 250) 429 | --fw-violet-500: rgb(139 92 246 / var(--fw-color-opacity)); // rgb(139 92 246) 430 | --fw-violet-600: rgb(124 58 237 / var(--fw-color-opacity)); // rgb(124 58 237) 431 | --fw-violet-700: rgb(109 40 217 / var(--fw-color-opacity)); // rgb(109 40 217) 432 | --fw-violet-800: rgb(91 33 182 / var(--fw-color-opacity)); // rgb(91 33 182) 433 | --fw-violet-900: rgb(76 29 149 / var(--fw-color-opacity)); // rgb(76 29 149) 434 | --fw-violet-950: rgb(46 16 101 / var(--fw-color-opacity)); // rgb(46 16 101) 435 | --fw-purple-50: rgb(250 245 255 / var(--fw-color-opacity)); // rgb(250 245 255) 436 | --fw-purple-100: rgb(243 232 255 / var(--fw-color-opacity)); // rgb(243 232 255) 437 | --fw-purple-200: rgb(233 213 255 / var(--fw-color-opacity)); // rgb(233 213 255) 438 | --fw-purple-300: rgb(216 180 254 / var(--fw-color-opacity)); // rgb(216 180 254) 439 | --fw-purple-400: rgb(192 132 252 / var(--fw-color-opacity)); // rgb(192 132 252) 440 | --fw-purple-500: rgb(168 85 247 / var(--fw-color-opacity)); // rgb(168 85 247) 441 | --fw-purple-600: rgb(147 51 234 / var(--fw-color-opacity)); // rgb(147 51 234) 442 | --fw-purple-700: rgb(126 34 206 / var(--fw-color-opacity)); // rgb(126 34 206) 443 | --fw-purple-800: rgb(107 33 168 / var(--fw-color-opacity)); // rgb(107 33 168) 444 | --fw-purple-900: rgb(88 28 135 / var(--fw-color-opacity)); // rgb(88 28 135) 445 | --fw-purple-950: rgb(59 7 100 / var(--fw-color-opacity)); // rgb(59 7 100) 446 | --fw-fuchsia-50: rgb(253 244 255 / var(--fw-color-opacity)); // rgb(253 244 255) 447 | --fw-fuchsia-100: rgb(250 232 255 / var(--fw-color-opacity)); // rgb(250 232 255) 448 | --fw-fuchsia-200: rgb(245 208 254 / var(--fw-color-opacity)); // rgb(245 208 254) 449 | --fw-fuchsia-300: rgb(240 171 252 / var(--fw-color-opacity)); // rgb(240 171 252) 450 | --fw-fuchsia-400: rgb(232 121 249 / var(--fw-color-opacity)); // rgb(232 121 249) 451 | --fw-fuchsia-500: rgb(217 70 239 / var(--fw-color-opacity)); // rgb(217 70 239) 452 | --fw-fuchsia-600: rgb(192 38 211 / var(--fw-color-opacity)); // rgb(192 38 211) 453 | --fw-fuchsia-700: rgb(162 28 175 / var(--fw-color-opacity)); // rgb(162 28 175) 454 | --fw-fuchsia-800: rgb(134 25 143 / var(--fw-color-opacity)); // rgb(134 25 143) 455 | --fw-fuchsia-900: rgb(112 26 117 / var(--fw-color-opacity)); // rgb(112 26 117) 456 | --fw-fuchsia-950: rgb(74 4 78 / var(--fw-color-opacity)); // rgb(74 4 78) 457 | --fw-pink-50: rgb(253 242 248 / var(--fw-color-opacity)); // rgb(253 242 248) 458 | --fw-pink-100: rgb(252 231 243 / var(--fw-color-opacity)); // rgb(252 231 243) 459 | --fw-pink-200: rgb(251 207 232 / var(--fw-color-opacity)); // rgb(251 207 232) 460 | --fw-pink-300: rgb(249 168 212 / var(--fw-color-opacity)); // rgb(249 168 212) 461 | --fw-pink-400: rgb(244 114 182 / var(--fw-color-opacity)); // rgb(244 114 182) 462 | --fw-pink-500: rgb(236 72 153 / var(--fw-color-opacity)); // rgb(236 72 153) 463 | --fw-pink-600: rgb(219 39 119 / var(--fw-color-opacity)); // rgb(219 39 119) 464 | --fw-pink-700: rgb(190 24 93 / var(--fw-color-opacity)); // rgb(190 24 93) 465 | --fw-pink-800: rgb(157 23 77 / var(--fw-color-opacity)); // rgb(157 23 77) 466 | --fw-pink-900: rgb(131 24 67 / var(--fw-color-opacity)); // rgb(131 24 67) 467 | --fw-pink-950: rgb(80 7 36 / var(--fw-color-opacity)); // rgb(80 7 36) 468 | --fw-rose-50: rgb(255 241 242 / var(--fw-color-opacity)); // rgb(255 241 242) 469 | --fw-rose-100: rgb(255 228 230 / var(--fw-color-opacity)); // rgb(255 228 230) 470 | --fw-rose-200: rgb(254 205 211 / var(--fw-color-opacity)); // rgb(254 205 211) 471 | --fw-rose-300: rgb(253 164 175 / var(--fw-color-opacity)); // rgb(253 164 175) 472 | --fw-rose-400: rgb(251 113 133 / var(--fw-color-opacity)); // rgb(251 113 133) 473 | --fw-rose-500: rgb(244 63 94 / var(--fw-color-opacity)); // rgb(244 63 94) 474 | --fw-rose-600: rgb(225 29 72 / var(--fw-color-opacity)); // rgb(225 29 72) 475 | --fw-rose-700: rgb(190 18 60 / var(--fw-color-opacity)); // rgb(190 18 60) 476 | --fw-rose-800: rgb(159 18 57 / var(--fw-color-opacity)); // rgb(159 18 57) 477 | --fw-rose-900: rgb(136 19 55 / var(--fw-color-opacity)); // rgb(136 19 55) 478 | --fw-rose-950: rgb(76 5 25 / var(--fw-color-opacity)); // rgb(76 5 25) 479 | } 480 | 481 | @keyframes fw-spin { 482 | from { 483 | transform: rotate(0deg); 484 | } 485 | 486 | to { 487 | transform: rotate(360deg); 488 | } 489 | } 490 | 491 | @keyframes fw-ping { 492 | 75%, 493 | 100% { 494 | transform: scale(2); 495 | opacity: 0; 496 | } 497 | } 498 | 499 | @keyframes fw-pulse { 500 | 0%, 501 | 100% { 502 | opacity: 1; 503 | } 504 | 505 | 50% { 506 | opacity: 0.5; 507 | } 508 | } 509 | 510 | @keyframes fw-bounce { 511 | 0%, 512 | 100% { 513 | transform: translateY(-25%); 514 | animation-timing-function: cubic-bezier(0.8, 0, 1, 1); 515 | } 516 | 517 | 50% { 518 | transform: translateY(0); 519 | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); 520 | } 521 | } 522 | --------------------------------------------------------------------------------