{"id":21502771,"url":"https://github.com/fuzetsu/zaftig-tailwind","last_synced_at":"2026-07-10T21:31:25.455Z","repository":{"id":71128756,"uuid":"200115257","full_name":"fuzetsu/zaftig-tailwind","owner":"fuzetsu","description":"tailwind utilities for zaftig","archived":false,"fork":false,"pushed_at":"2020-08-22T04:05:52.000Z","size":9,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T08:36:29.599Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/fuzetsu.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-01T20:29:53.000Z","updated_at":"2020-08-22T04:05:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"6daaf827-a7c2-4de0-8f87-ee7e87408ed4","html_url":"https://github.com/fuzetsu/zaftig-tailwind","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fuzetsu/zaftig-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fzaftig-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fzaftig-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fzaftig-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fzaftig-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fuzetsu","download_url":"https://codeload.github.com/fuzetsu/zaftig-tailwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fzaftig-tailwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35344523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-10T02:00:06.465Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-23T18:17:44.944Z","updated_at":"2026-07-10T21:31:25.450Z","avatar_url":"https://github.com/fuzetsu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zaftig Tailwind\n\n\u003e ⚠ These docs are a WIP ⚠\n\nA helper library for [Zaftig](https://github.com/fuzetsu/zaftig) (CSS in JS) that brings some of the main utilities from [Tailwind CSS](https://tailwindcss.com/).\n\n## Example Usage\n\n```js\nimport z from 'zaftig'\nimport { colors, helpers } from 'zaftig-tailwind'\n\nz.global(colors) // register color variables\nz.helper(helpers) // register helpers\n\nz.global`\n  font-sans\n  c $gray-8\n  pad 3\n\n  @between sm md {\n    a { c $green-5 }\n  }\n`\n```\n\n# Features\n\n## Helpers\n\n### `padding` / `margin`\n\nTailwind CSS provides utilities to set padding/margin in increments of `0.25rem`.\n\nYou achieve the same using the helpers `mar` / `pad`\n\nThe first argument to the helper is a number and will be multiplied by `0.25rem`, the second optional argument is the directions to apply the margin/padding to. `t` is top, `b` is bottom, `l` is left, and `r` is right.\n\n```\npad 3     === padding: 0.75rem\nmar 10    === margin: 2.5rem\npad 2 lrt === padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem\n```\n\n```js\nz`\n  pad 3\n  mar 10\n\n  pad 3 lr\n  mar 10 tlr\n`\n```\n\n### `text size` / `font-family`\n\nZaftig Tailwind provides 3 basic `font-family` helpers, `font-sans`, `font-serif` and `font-mono`. Use to apply good looking web-safe fonts of the particular type.\n\nThe `text` helper provides a series of preset `font-size`s based on what [Tailwind CSS provides](). It accepts a single argument specifying the size which can be: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, or `6xl`.\n\n```js\nz`\n  font-sans\n  text xl\n`\n```\n\n### `shadow`\n\nApplies a given intensity/type of box-shadow. This helper takes one param which is one of the following values: `base`, `md`, `lg`, `xl`, `2xl`, `inner`, `outline`, `none`.\n\n```js\nz`shadow lg`\n// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n```\n\n### `rounded`\n\nThis helper doesn't take params and simply applies `0.25rem` of border-radius.\n\n```js\nz`rounded`\n// border-radius: 0.25rem;\n```\n\n### `size`\n\nThis helper takes 2 params, `width` and `height` in `px` if not specified. If only 1 param is provided the same value will be used for both `width` and `height`.\n\n```js\nz`\n  size 40\n  size 100 200\n  size 20rem\n`\n```\n\n## Colors\n\nTailwind's whole palette of colors are provided as css variables. Since they're variables they can easily be used with any CSS property.\n\n[See here for the full list of available colors](https://tailwindcss.com/docs/customizing-colors#default-color-palette).\n\nThe color variables are not loaded by default, allowing you to import them and load them at whatever scope you like.\n\n```js\nimport { colors } from 'zaftig-tailwind'\n\n// load the colors into the global scope\nz.global(colors)\n\n// use them in a style\nz`\n  color $blue-2\n  background-color $green-5\n  border 1 solid $red-5\n`\n```\n\nSince the colors are just css variables you can easily redefine them as follows:\n\n```js\nimport { colors } from 'zaftig-tailwind'\n\n// load colors into global scope and redefine blue-2\nz.global`\n  ${colors}\n  \n  $blue-2 #4299E1\n`\n```\n\n## Customization\n\nThe defaults provided by this library can easily be changed if so desired. Several of the value maps are exported by the library and can simply be mutated.\n\n```js\nimport { breakpoints, shadowMap, textSizes } from 'zaftig-tailwind'\n\nbreakpoints.md = '900px'\nshadowMap.outline = '0 0 0 10px rgba(66, 153, 225, 0.5)'\ntextSizes.lg = '1.5rem'\n```\n\nThe properties of the object matchup to the possible values of the relevant helpers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuzetsu%2Fzaftig-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuzetsu%2Fzaftig-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuzetsu%2Fzaftig-tailwind/lists"}