{"id":13683067,"url":"https://github.com/zvizvi/freewindcss","last_synced_at":"2025-03-23T14:31:45.509Z","repository":{"id":41092596,"uuid":"463376530","full_name":"zvizvi/freewindcss","owner":"zvizvi","description":"🍃 Use Tailwind's set values and units in pure CSS variables","archived":false,"fork":false,"pushed_at":"2023-05-16T01:05:51.000Z","size":185,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T21:21:48.419Z","etag":null,"topics":["css","css-variables","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/freewindcss","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zvizvi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-02-25T02:56:49.000Z","updated_at":"2023-12-19T14:03:20.000Z","dependencies_parsed_at":"2024-01-14T16:09:45.581Z","dependency_job_id":null,"html_url":"https://github.com/zvizvi/freewindcss","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"436e4db507e4c9c2da174ac28bd37d096aedd00b"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zvizvi%2Ffreewindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zvizvi%2Ffreewindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zvizvi%2Ffreewindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zvizvi%2Ffreewindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zvizvi","download_url":"https://codeload.github.com/zvizvi/freewindcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245116006,"owners_count":20563264,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-variables","tailwindcss"],"created_at":"2024-08-02T13:01:59.212Z","updated_at":"2025-03-23T14:31:45.083Z","avatar_url":"https://github.com/zvizvi.png","language":"SCSS","readme":"# 🍃 Freewind CSS\n\nUse Tailwind's set values and units without installing Tailwind.\n\nBring the conventional units prepared by Tailwind in the usual way of writing CSS.\n\n## Installation\n\nInstall with npm:\n\n```shell\nnpm install freewindcss\n```\n\nInstall with yarn:\n\n```shell\nyarn add freewindcss\n```\n\nInstall using a CDN link in your HTML file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/freewindcss@latest/lib/freewindcss.min.css\"\u003e\n```\n\n## Examples\n\n```scss\n.element {\n  width: var(--fw-4); // 1rem\n  height: var(--fw-2); // 0.5rem\n  margin: 0 auto var(--fw-2); // 0 auto 0.5rem\n  font-size: var(--fw-text-sm); // 0.875rem\n  line-height: var(--fw-leading-relaxed); // 1.625\n  font-weight: var(--fw-font-thin); // 100\n  background: var(--fw-indigo-400); // rgb(129, 140, 248)\n  border-radius: var(--fw-rounded-md); // 0.375rem\n  box-shadow: var(--fw-shadow-sm); // 0 1px 2px 0 rgb(0 0 0 / 0.05)\n  transition: var(--fw-ease-in-out); // cubic-bezier(0.4, 0, 0.2, 1)\n}\n```\n\n#### See a live demo on [Codesandbox.io](https://codesandbox.io/s/freewindcss-pfq17e)\n\n## Documentation\n\n\n\u003cdetails open\u003e\n\u003csummary\u003eIndex\u003c/summary\u003e\n\n- [Sizing and Spacing](#sizing-and-spacing)\n  - [Negative sizing values](#negative-sizing-and-spacing-values)\n- [Font Family](#font-family)\n- [Font Size](#font-size)\n- [Font Weight](#font-weight)\n- [Letter Spacing](#letter-spacing)\n- [Line Height](#line-height)\n- [Border Radius](#border-radius)\n- [Box Shadow](#box-shadow)\n- [Blur Filter](#blur-filter)\n- [Drop Shadow](#drop-shadow)\n- [Columns](#columns)\n- [Transition Timing](#transition-timing)\n- [Colors](#colors)\n  - [Colors transparency (alpha)](#colors-transparency-alpha)\n- [Animations](#animations)\n- [Container Width](#container-width)\n\u003c/details\u003e\n\n\n### Sizing and Spacing\n#### Useful with the following properties; `margin`, `padding`, `height`, `width`, `top`, `right`, `bottom`, `left` Etc. for example:\n```scss\nelement {\n  right: var(--fw-2); // 8px\n  width: var(--fw-10); // 40px\n  padding: var(--fw-2) var(--fw-4); // 8px 16px\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```css\n--fw-auto: auto;        // auto\n--fw-full: 100%;        // 100%\n--fw-0: 0;              // 0px\n--fw-0\\5: 0.125rem;     // 2px\n--fw-1: 0.25rem;        // 4px\n--fw-1\\5: 0.375rem;     // 6px\n--fw-2: 0.5rem;         // 8px\n--fw-2\\5: 0.625rem;     // 10px\n--fw-3: 0.75rem;        // 12px\n--fw-3\\5: 0.875rem;     // 14px\n--fw-4: 1rem;           // 16px\n--fw-4\\5: 1.125rem;     // 18px\n--fw-5: 1.25rem;        // 20px\n--fw-6: 1.5rem;         // 24px\n--fw-7: 1.75rem;        // 28px\n--fw-8: 2rem;           // 32px\n--fw-9: 2.25rem;        // 36px\n--fw-10: 2.5rem;        // 40px\n--fw-11: 2.75rem;       // 44px\n--fw-12: 3rem;          // 48px\n--fw-13: 3.25rem;       // 52px\n--fw-14: 3.5rem;        // 56px\n--fw-15: 3.75rem;       // 60px\n--fw-16: 4rem;          // 64px\n--fw-17: 4.25rem;       // 68px\n--fw-18: 4.5rem;        // 72px\n--fw-19: 4.75rem;       // 76px\n--fw-20: 5rem;          // 80px\n--fw-24: 6rem;          // 96px\n--fw-28: 7rem;          // 112px\n--fw-32: 8rem;          // 128px\n--fw-36: 9rem;          // 144px\n--fw-40: 10rem;         // 160px\n--fw-44: 11rem;         // 176px\n--fw-48: 12rem;         // 192px\n--fw-52: 13rem;         // 208px\n--fw-56: 14rem;         // 224px\n--fw-60: 15rem;         // 240px\n--fw-64: 16rem;         // 256px\n--fw-72: 18rem;         // 288px\n--fw-80: 20rem;         // 320px\n--fw-96: 24rem;         // 384px\n```\n\u003c/details\u003e\n\n#### Negative sizing and spacing values\nFor negative size values just use the previous variables with a double - before the variable id:\n`--fw--1`, `--wf--1\\5`, `--wf--full` and so on.\n\n### Font Family\n#### Can be used with the `font-family` property, for example:\n```scss\nelement {\n  font-family: var(--fw-font-serif); // ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--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\";\n--fw-font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n--fw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n```\n\u003c/details\u003e\n\n### Font Size\n#### Can be used with the `font-size` property, for example:\n```scss\nelement {\n  font-size: var(--fw-text-2xl); // 1.5rem\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-text-xs: 0.75rem;\n--fw-text-sm: 0.875rem;\n--fw-text-base: 1rem;\n--fw-text-lg: 1.125rem;\n--fw-text-xl: 1.25rem;\n--fw-text-2xl: 1.5rem;\n--fw-text-3xl: 1.875rem;\n--fw-text-4xl: 2.25rem;\n--fw-text-5xl: 3rem;\n--fw-text-6xl: 4rem;\n```\n\u003c/details\u003e\n\n### Font Weight\n#### For example:\n```scss\nelement {\n  font-weight: var(--fw-font-semibold); // 600\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-font-thin: 100;\n--fw-font-extralight: 200;\n--fw-font-light: 300;\n--fw-font-normal: 400;\n--fw-font-medium: 500;\n--fw-font-semibold: 600;\n--fw-font-bold: 700;\n--fw-font-extrabold: 800;\n--fw-font-black: 900;\n```\n\u003c/details\u003e\n\n### Letter Spacing\n#### Using with `letter-spacing` property, for example:\n```scss\nelement {\n  letter-spacing: var(--fw-tracking-tight); // -0.025em\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-tracking-tighter: -0.05em;\n--fw-tracking-tight: -0.025em;\n--fw-tracking-normal: 0;\n--fw-tracking-wide: 0.025em;\n--fw-tracking-wider: 0.05em;\n--fw-tracking-widest: 0.1em;\n```\n\u003c/details\u003e\n\n### Line Height\n#### Used with `line-height` property, for example:\n```scss\nelement {\n  line-height: var(--fw-leading-5); // 20px\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-leading-3: 0.75rem; // 12px\n--fw-leading-4: 1rem;    // 16px\n--fw-leading-5: 1.25rem; // 20px\n--fw-leading-6: 1.5rem;  // 24px\n--fw-leading-7: 1.75rem; // 28px\n--fw-leading-8: 2rem;    // 32px\n--fw-leading-9: 2.25rem; // 36px\n--fw-leading-10: 2.5rem; // 40px\n--fw-leading-none: 1;\n--fw-leading-tight: 1.25;\n--fw-leading-snug: 1.375;\n--fw-leading-normal: 1.5;\n--fw-leading-relaxed: 1.625;\n--fw-leading-loose: 2;\n```\n\u003c/details\u003e\n\n### Border Radius\n#### For example:\n```scss\nelement {\n  border-radius: var(--fw-rounded-md); // 6px\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-rounded-none: 0px;      // 0px\n--fw-rounded-sm: 0.125rem;   // 2px\n--fw-rounded: 0.25rem;       // 4px\n--fw-rounded-md: 0.375rem;   // 6px\n--fw-rounded-lg: 0.5rem;     // 8px\n--fw-rounded-xl: 0.75rem;    // 12px\n--fw-rounded-2xl: 1rem;      // 16px\n--fw-rounded-3xl: 1.5rem;    // 24px\n--fw-rounded-full: 9999px;   // 9999px\n```\n\u003c/details\u003e\n\n### Box Shadow\n#### For example:\n```scss\nelement {\n  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)\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n--fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n--fw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n--fw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n--fw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n--fw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n--fw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n--fw-shadow-none: 0 0 #0000;\n```\n\u003c/details\u003e\n\n### Blur Filter\n#### Used with `filter: blur(x)` or with `  backdrop-filter: blur(x)`, for example:\n```scss\nelement {\n  backdrop-filter: var(--fw-blur-md); // blur(12px)\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-blur-none: blur(0);\n--fw-blur-sm: blur(4px);\n--fw-blur: blur(8px);\n--fw-blur-md: blur(12px);\n--fw-blur-lg: blur(16px);\n--fw-blur-xl: blur(24px);\n--fw-blur-2xl: blur(40px);\n--fw-blur-3xl: blur(64px);\n```\n\u003c/details\u003e\n\n### Drop Shadow\n#### Used with `filter: drop-shadow(x)`, for example:\n```scss\nelement {\n  filter: var(--fw-drop-shadow-sm); // drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));\n--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));\n--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));\n--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));\n--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));\n--fw-drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n--fw-drop-shadow-none: drop-shadow(0 0 #0000);\n```\n\u003c/details\u003e\n\n### Columns\n#### example:\n```scss\nelement {\n  columns: var(--fw-columns-3xl); // 768px\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-columns-3xs: 16rem; // 256px\n--fw-columns-2xs: 18rem; // 288px\n--fw-columns-xs: 20rem;  // 320px\n--fw-columns-sm: 24rem;  // 384px\n--fw-columns-md: 28rem;  // 448px\n--fw-columns-lg: 32rem;  // 512px\n--fw-columns-xl: 36rem;  // 576px\n--fw-columns-2xl: 42rem; // 672px\n--fw-columns-3xl: 48rem; // 768px\n--fw-columns-4xl: 56rem; // 896px\n--fw-columns-5xl: 64rem; // 1024px\n--fw-columns-6xl: 72rem; // 1152px\n--fw-columns-7xl: 80rem; // 1280px\n```\n\u003c/details\u003e\n\n### Transition Timing\n#### example:\n```scss\nelement {\n  transition-timing-function: var(--fw-ease-out); // cubic-bezier(0, 0, 0.2, 1)\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-ease-linear: linear;\n--fw-ease-in: cubic-bezier(0.4, 0, 1, 1);\n--fw-ease-out: cubic-bezier(0, 0, 0.2, 1);\n--fw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n```\n\u003c/details\u003e\n\n### Colors\n#### example:\n```scss\nelement {\n  color: var(--fw-slate-100); // rgb(241 245 249)\n  background: var(--fw-fuchsia-500); // rgb(217 70 239)\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```clojure\n--fw-black: rgb(0 0 0);             // #000000\n--fw-white: rgb(255 255 255);       // #ffffff\n--fw-slate-50: rgb(248 250 252);    // #f8fafc\n--fw-slate-100: rgb(241 245 249);   // #f1f5f9\n--fw-slate-200: rgb(226 232 240);   // #e2e8f0\n--fw-slate-300: rgb(203 213 225);   // #cbd5e1\n--fw-slate-400: rgb(148 163 184);   // #94a3b8\n--fw-slate-500: rgb(100 116 139);   // #64748b\n--fw-slate-600: rgb(71 85 105);     // #475569\n--fw-slate-700: rgb(51 65 85);      // #334155\n--fw-slate-800: rgb(30 41 59);      // #1e293b\n--fw-slate-900: rgb(15 23 42);      // #0f172a\n--fw-slate-950: rgb(2 6 23);        // #020617\n--fw-gray-50: rgb(249 250 251);     // #f9fafb\n--fw-gray-100: rgb(243 244 246);    // #f3f4f6\n--fw-gray-200: rgb(229 231 235);    // #e5e7eb\n--fw-gray-300: rgb(209 213 219);    // #d1d5db\n--fw-gray-400: rgb(156 163 175);    // #9ca3af\n--fw-gray-500: rgb(107 114 128);    // #6b7280\n--fw-gray-600: rgb(75 85 99);       // #4b5563\n--fw-gray-700: rgb(55 65 81);       // #374151\n--fw-gray-800: rgb(31 41 55);       // #1f2937\n--fw-gray-900: rgb(17 24 39);       // #111827\n--fw-gray-950: rgb(3 7 18);         // #030712\n--fw-zinc-50: rgb(250 250 250);     // #fafafa\n--fw-zinc-100: rgb(244 244 245);    // #f4f4f5\n--fw-zinc-200: rgb(228 228 231);    // #e4e4e7\n--fw-zinc-300: rgb(212 212 216);    // #d4d4d8\n--fw-zinc-400: rgb(161 161 170);    // #a1a1aa\n--fw-zinc-500: rgb(113 113 122);    // #71717a\n--fw-zinc-600: rgb(82 82 91);       // #52525b\n--fw-zinc-700: rgb(63 63 70);       // #3f3f46\n--fw-zinc-800: rgb(39 39 42);       // #27272a\n--fw-zinc-900: rgb(24 24 27);       // #18181b\n--fw-zinc-950: rgb(9 9 11);         // #09090b\n--fw-neutral-50: rgb(250 250 250);  // #fafafa\n--fw-neutral-100: rgb(245 245 245); // #f5f5f5\n--fw-neutral-200: rgb(229 229 229); // #e5e5e5\n--fw-neutral-300: rgb(212 212 212); // #d4d4d4\n--fw-neutral-400: rgb(163 163 163); // #a3a3a3\n--fw-neutral-500: rgb(115 115 115); // #737373\n--fw-neutral-600: rgb(82 82 82);    // #525252\n--fw-neutral-700: rgb(64 64 64);    // #404040\n--fw-neutral-800: rgb(38 38 38);    // #262626\n--fw-neutral-900: rgb(23 23 23);    // #171717\n--fw-neutral-950: rgb(10 10 10);    // #0a0a0a\n--fw-stone-50: rgb(250 250 249);    // #fafaf9\n--fw-stone-100: rgb(245 245 244);   // #f5f5f4\n--fw-stone-200: rgb(231 229 228);   // #e7e5e4\n--fw-stone-300: rgb(214 211 209);   // #d6d3d1\n--fw-stone-400: rgb(168 162 158);   // #a8a29e\n--fw-stone-500: rgb(120 113 108);   // #78716c\n--fw-stone-600: rgb(87 83 78);      // #57534e\n--fw-stone-700: rgb(68 64 60);      // #44403c\n--fw-stone-800: rgb(41 37 36);      // #292524\n--fw-stone-900: rgb(28 25 23);      // #1c1917\n--fw-stone-950: rgb(12 10 9);       // #0c0a09\n--fw-red-50: rgb(254 242 242);      // #fef2f2\n--fw-red-100: rgb(254 226 226);     // #fee2e2\n--fw-red-200: rgb(254 202 202);     // #fecaca\n--fw-red-300: rgb(252 165 165);     // #fca5a5\n--fw-red-400: rgb(248 113 113);     // #f87171\n--fw-red-500: rgb(239 68 68);       // #ef4444\n--fw-red-600: rgb(220 38 38);       // #dc2626\n--fw-red-700: rgb(185 28 28);       // #b91c1c\n--fw-red-800: rgb(153 27 27);       // #991b1b\n--fw-red-900: rgb(127 29 29);       // #7f1d1d\n--fw-red-950: rgb(69 10 10);        // #450a0a\n--fw-orange-50: rgb(255 247 237);   // #fff7ed\n--fw-orange-100: rgb(255 237 213);  // #ffedd5\n--fw-orange-200: rgb(254 215 170);  // #fed7aa\n--fw-orange-300: rgb(253 186 116);  // #fdba74\n--fw-orange-400: rgb(251 146 60);   // #fb923c\n--fw-orange-500: rgb(249 115 22);   // #f97316\n--fw-orange-600: rgb(234 88 12);    // #ea580c\n--fw-orange-700: rgb(194 65 12);    // #c2410c\n--fw-orange-800: rgb(154 52 18);    // #9a3412\n--fw-orange-900: rgb(124 45 18);    // #7c2d12\n--fw-orange-950: rgb(67 20 7);      // #431407\n--fw-amber-50: rgb(255 251 235);    // #fffbeb\n--fw-amber-100: rgb(254 243 199);   // #fef3c7\n--fw-amber-200: rgb(253 230 138);   // #fde68a\n--fw-amber-300: rgb(252 211 77);    // #fcd34d\n--fw-amber-400: rgb(251 191 36);    // #fbbf24\n--fw-amber-500: rgb(245 158 11);    // #f59e0b\n--fw-amber-600: rgb(217 119 6);     // #d97706\n--fw-amber-700: rgb(180 83 9);      // #b45309\n--fw-amber-800: rgb(146 64 14);     // #92400e\n--fw-amber-900: rgb(120 53 15);     // #78350f\n--fw-amber-950: rgb(69 26 3);       // #451800\n--fw-yellow-50: rgb(254 252 232);   // #fefce8\n--fw-yellow-100: rgb(254 249 195);  // #fef9c3\n--fw-yellow-200: rgb(254 240 138);  // #fef08a\n--fw-yellow-300: rgb(253 224 71);   // #fde047\n--fw-yellow-400: rgb(250 204 21);   // #facc15\n--fw-yellow-500: rgb(234 179 8);    // #eab308\n--fw-yellow-600: rgb(202 138 4);    // #ca8a04\n--fw-yellow-700: rgb(161 98 7);     // #a16207\n--fw-yellow-800: rgb(133 77 14);    // #854d0e\n--fw-yellow-900: rgb(113 63 18);    // #713f12\n--fw-yellow-950: rgb(66 32 6);      // #422006\n--fw-lime-50: rgb(247 254 231);     // #f7fee7\n--fw-lime-100: rgb(236 252 203);    // #ecfccb\n--fw-lime-200: rgb(217 249 157);    // #d9f99d\n--fw-lime-300: rgb(190 242 100);    // #bef264\n--fw-lime-400: rgb(163 230 53);     // #a3e635\n--fw-lime-500: rgb(132 204 22);     // #84cc16\n--fw-lime-600: rgb(101 163 13);     // #65a30d\n--fw-lime-700: rgb(77 124 15);      // #4d7c0f\n--fw-lime-800: rgb(63 98 18);       // #3f6212\n--fw-lime-900: rgb(54 83 20);       // #365314\n--fw-lime-950: rgb(26 46 5);        // #1a2e05\n--fw-green-50: rgb(240 253 244);    // #f0fdf4\n--fw-green-100: rgb(220 252 231);   // #dcfce7\n--fw-green-200: rgb(187 247 208);   // #bbf7d0\n--fw-green-300: rgb(134 239 172);   // #86efac\n--fw-green-400: rgb(74 222 128);    // #4ade80\n--fw-green-500: rgb(34 197 94);     // #22c55e\n--fw-green-600: rgb(22 163 74);     // #16a34a\n--fw-green-700: rgb(21 128 61);     // #15803d\n--fw-green-800: rgb(22 101 52);     // #166534\n--fw-green-900: rgb(20 83 45);      // #14532d\n--fw-green-950: rgb(5 46 22);       // #052e16\n--fw-emerald-50: rgb(236 253 245);  // #ecfdf5\n--fw-emerald-100: rgb(209 250 229); // #d1fae5\n--fw-emerald-200: rgb(167 243 208); // #a7f3d0\n--fw-emerald-300: rgb(110 231 183); // #6ee7b7\n--fw-emerald-400: rgb(52 211 153);  // #34d399\n--fw-emerald-500: rgb(16 185 129);  // #10b981\n--fw-emerald-600: rgb(5 150 105);   // #059669\n--fw-emerald-700: rgb(4 120 87);    // #047857\n--fw-emerald-800: rgb(6 95 70);     // #065f46\n--fw-emerald-900: rgb(6 78 59);     // #064e3b\n--fw-emerald-950: rgb(2 44 34);     // #022c22\n--fw-teal-50: rgb(240 253 250);     // #f0fdfa\n--fw-teal-100: rgb(204 251 241);    // #ccfbf1\n--fw-teal-200: rgb(153 246 228);    // #99f6e4\n--fw-teal-300: rgb(94 234 212);     // #5eead4\n--fw-teal-400: rgb(45 212 191);     // #2dd4bf\n--fw-teal-500: rgb(20 184 166);     // #14b8a6\n--fw-teal-600: rgb(13 148 136);     // #0d9488\n--fw-teal-700: rgb(15 118 110);     // #0f766e\n--fw-teal-800: rgb(17 94 89);       // #115e59\n--fw-teal-900: rgb(19 78 74);       // #134e4a\n--fw-teal-950: rgb(4 47 46);        // #042f2e\n--fw-cyan-50: rgb(236 254 255);     // #ecfeff\n--fw-cyan-100: rgb(207 250 254);    // #cffafe\n--fw-cyan-200: rgb(165 243 252);    // #a5f3fc\n--fw-cyan-300: rgb(103 232 249);    // #67e8f9\n--fw-cyan-400: rgb(34 211 238);     // #22d3ee\n--fw-cyan-500: rgb(6 182 212);      // #06b6d4\n--fw-cyan-600: rgb(8 145 178);      // #0891b2\n--fw-cyan-700: rgb(14 116 144);     // #0e7490\n--fw-cyan-800: rgb(21 94 117);      // #155e75\n--fw-cyan-900: rgb(22 78 99);       // #164e63\n--fw-cyan-950: rgb(8 51 68);        // #083344\n--fw-sky-50: rgb(240 249 255);      // #f0f9ff\n--fw-sky-100: rgb(224 242 254);     // #e0f2fe\n--fw-sky-200: rgb(186 230 253);     // #bae6fd\n--fw-sky-300: rgb(125 211 252);     // #7dd3fc\n--fw-sky-400: rgb(56 189 248);      // #38bdf8\n--fw-sky-500: rgb(14 165 233);      // #0ea5e9\n--fw-sky-600: rgb(2 132 199);       // #0284c7\n--fw-sky-700: rgb(3 105 161);       // #0369a1\n--fw-sky-800: rgb(7 89 133);        // #075985\n--fw-sky-900: rgb(12 74 110);       // #0c4a6e\n--fw-sky-950: rgb(8 47 73);         // #082f49\n--fw-blue-50: rgb(239 246 255);     // #eff6ff\n--fw-blue-100: rgb(219 234 254);    // #dbeafe\n--fw-blue-200: rgb(191 219 254);    // #bfdbfe\n--fw-blue-300: rgb(147 197 253);    // #93c5fd\n--fw-blue-400: rgb(96 165 250);     // #60a5fa\n--fw-blue-500: rgb(59 130 246);     // #3b82f6\n--fw-blue-600: rgb(37 99 235);      // #2563eb\n--fw-blue-700: rgb(29 78 216);      // #1d4ed8\n--fw-blue-800: rgb(30 64 175);      // #1e40af\n--fw-blue-900: rgb(30 58 138);      // #1e3a8a\n--fw-blue-950: rgb(23 37 84);       // #172554\n--fw-indigo-50: rgb(238 242 255);   // #eef2ff\n--fw-indigo-100: rgb(224 231 255);  // #e0e7ff\n--fw-indigo-200: rgb(199 210 254);  // #c7d2fe\n--fw-indigo-300: rgb(165 180 252);  // #a5b4fc\n--fw-indigo-400: rgb(129 140 248);  // #818cf8\n--fw-indigo-500: rgb(99 102 241);   // #6366f1\n--fw-indigo-600: rgb(79 70 229);    // #4f46e5\n--fw-indigo-700: rgb(67 56 202);    // #4338ca\n--fw-indigo-800: rgb(55 48 163);    // #3730a3\n--fw-indigo-900: rgb(49 46 129);    // #312e81\n--fw-indigo-950: rgb(30 27 75);     // #1e1b4b\n--fw-violet-50: rgb(245 243 255);   // #f5f3ff\n--fw-violet-100: rgb(237 233 254);  // #ede9fe\n--fw-violet-200: rgb(221 214 254);  // #ddd6fe\n--fw-violet-300: rgb(196 181 253);  // #c4b5fd\n--fw-violet-400: rgb(167 139 250);  // #a78bfa\n--fw-violet-500: rgb(139 92 246);   // #8b5cf6\n--fw-violet-600: rgb(124 58 237);   // #7c3aed\n--fw-violet-700: rgb(109 40 217);   // #6d28d9\n--fw-violet-800: rgb(91 33 182);    // #5b21b6\n--fw-violet-900: rgb(76 29 149);    // #4c1d95\n--fw-violet-950: rgb(46 16 101);    // #2e1065\n--fw-purple-50: rgb(250 245 255);   // #faf5ff\n--fw-purple-100: rgb(243 232 255);  // #f3e8ff\n--fw-purple-200: rgb(233 213 255);  // #e9d5ff\n--fw-purple-300: rgb(216 180 254);  // #d8b4fe\n--fw-purple-400: rgb(192 132 252);  // #c084fc\n--fw-purple-500: rgb(168 85 247);   // #a855f7\n--fw-purple-600: rgb(147 51 234);   // #9333ea\n--fw-purple-700: rgb(126 34 206);   // #7e22ce\n--fw-purple-800: rgb(107 33 168);   // #6b21a8\n--fw-purple-900: rgb(88 28 135);    // #581c87\n--fw-purple-950: rgb(59 7 100);     // #3b0764\n--fw-fuchsia-50: rgb(253 244 255);  // #fdf4ff\n--fw-fuchsia-100: rgb(250 232 255); // #fae8ff\n--fw-fuchsia-200: rgb(245 208 254); // #f5d0fe\n--fw-fuchsia-300: rgb(240 171 252); // #f0abfc\n--fw-fuchsia-400: rgb(232 121 249); // #e879f9\n--fw-fuchsia-500: rgb(217 70 239);  // #d946ef\n--fw-fuchsia-600: rgb(192 38 211);  // #c026d3\n--fw-fuchsia-700: rgb(162 28 175);  // #a21caf\n--fw-fuchsia-800: rgb(134 25 143);  // #86198f\n--fw-fuchsia-900: rgb(112 26 117);  // #701a75\n--fw-fuchsia-950: rgb(74 4 78);     // #4a044e\n--fw-pink-50: rgb(253 242 248);     // #fdf2f8\n--fw-pink-100: rgb(252 231 243);    // #fce7f3\n--fw-pink-200: rgb(251 207 232);    // #fbcfe8\n--fw-pink-300: rgb(249 168 212);    // #f9a8d4\n--fw-pink-400: rgb(244 114 182);    // #f472b6\n--fw-pink-500: rgb(236 72 153);     // #ec4899\n--fw-pink-600: rgb(219 39 119);     // #db2777\n--fw-pink-700: rgb(190 24 93);      // #be185d\n--fw-pink-800: rgb(157 23 77);      // #9d174d\n--fw-pink-900: rgb(131 24 67);      // #831843\n--fw-pink-950: rgb(80 7 36);        // #500724\n--fw-rose-50: rgb(255 241 242);     // #fff1f2\n--fw-rose-100: rgb(255 228 230);    // #ffe4e6\n--fw-rose-200: rgb(254 205 211);    // #fecdd3\n--fw-rose-300: rgb(253 164 175);    // #fda4af\n--fw-rose-400: rgb(251 113 133);    // #fb7185\n--fw-rose-500: rgb(244 63 94);      // #f43f5e\n--fw-rose-600: rgb(225 29 72);      // #e11d48\n--fw-rose-700: rgb(190 18 60);      // #be123c\n--fw-rose-800: rgb(159 18 57);      // #9f1239\n--fw-rose-900: rgb(136 19 55);      // #881337\n--fw-rose-950: rgb(76 5 25);        // #4c0519\n```\n\u003c/details\u003e\n\n### Colors transparency (alpha)\n#### Use ```--fw-color-opacity``` variable to set the color transparency\n\nEach 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.\n\nNote 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.\n\n#### example:\n```scss\nelement {\n  --fw-color-opacity: 0.6;\n  color: var(--fw-indigo-500); // rgba(99, 102, 241, 0.6)\n  background-color: var(--fw-lime-300); // rgba(190, 242, 100, 0.6);\n}\n```\n\n### Animations\n#### example:\n```scss\nelement {\n  animation: var(--fw-animation-pulse); // fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003eVariables\u003c/summary\u003e\n\n```scss\n--fw-animation-spin: fw-spin 1s linear infinite;\n--fw-animation-ping: fw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n--fw-animation-pulse: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n--fw-animation-bounce: fw-bounce 1s infinite;\n```\n\u003c/details\u003e\n\n### Container Width\n#### Can be used with the `width` or `max-width`, for example:\n```scss\nelement {\n  width: 100%;\n  max-width: var(--fw-container-width);\n}\n```\n\nThe value of `--fw-container-width` will depend on the screen size:\n```scss\n@media (max-width: 640px) {\n  --fw-container-width: 640px;\n}\n\n@media (max-width: 768px) {\n  --fw-container-width: 768px;\n}\n\n@media (max-width: 1024px) {\n  --fw-container-width: 1024px;\n}\n\n// or in a bigger screen:\n--fw-container-width: 1280px;\n```\n","funding_links":[],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzvizvi%2Ffreewindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzvizvi%2Ffreewindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzvizvi%2Ffreewindcss/lists"}