{"id":15513623,"url":"https://github.com/tol-is/tailwind-compositor","last_synced_at":"2025-10-12T10:30:49.131Z","repository":{"id":40767638,"uuid":"266406498","full_name":"tol-is/tailwind-compositor","owner":"tol-is","description":"A tailwindcss system of constraints designed to produce aesthetically pleasing, typographic compositions, based on objective, constant dimensions of space.","archived":false,"fork":false,"pushed_at":"2023-01-01T20:07:44.000Z","size":16285,"stargazers_count":37,"open_issues_count":18,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T18:02:06.505Z","etag":null,"topics":["baseline","baseline-grid","css","grid","postcss","tailwind","tailwindcss","tailwindcss-plugin","typography","vertical-rhythm"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tol-is.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-23T19:36:09.000Z","updated_at":"2025-02-16T23:39:22.000Z","dependencies_parsed_at":"2023-02-01T00:46:52.882Z","dependency_job_id":null,"html_url":"https://github.com/tol-is/tailwind-compositor","commit_stats":null,"previous_names":["a7sc11u/tailwind-compositor"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/tol-is/tailwind-compositor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tol-is%2Ftailwind-compositor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tol-is%2Ftailwind-compositor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tol-is%2Ftailwind-compositor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tol-is%2Ftailwind-compositor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tol-is","download_url":"https://codeload.github.com/tol-is/tailwind-compositor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tol-is%2Ftailwind-compositor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011063,"owners_count":26084865,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"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":["baseline","baseline-grid","css","grid","postcss","tailwind","tailwindcss","tailwindcss-plugin","typography","vertical-rhythm"],"created_at":"2024-10-02T09:54:28.650Z","updated_at":"2025-10-12T10:30:47.904Z","avatar_url":"https://github.com/tol-is.png","language":"TypeScript","readme":"# Tailwind Compositor\n\nCompositor is a system of constraints designed to produce aesthetically pleasing, typographic compositions, based on objective, constant dimensions of space.\n\nA baseline-grid typography system for [tailwindcss](https://tailwindcss.com/).\n\nAlgorithm Demo: [Styled Baseline](https://styled-baseline.netlify.app/)\n\n---\n\n## Installation\n\nYou will need fontkit, postcss and tailwindcss installed along with the plugin\n\n```\nnpm install postcss fontkit tailwindcss tailwind-compositor\n```\n\n#### - postcss.config.js\n\nIn your `postcss.config.js` you will need to import your standard `tailwind.config.js`, but also your `compositor.config.js`.\n\nThe `{ compositor }` will receive both, merge with your tailwind config, and return a standard tailwind configuration.\n\n```\nconst tailwindcss = require('tailwindcss');\nconst { compositor } = require('tailwind-compositor');\n\n// import both configurations\nconst compositorConfig = require('./compositor.config.js');\nconst tailwindConfig = require('./tailwind.config.js');\n\n// compose config\nconst tailwindConfigComposed = compositor(compositorConfig)(tailwindConfig);\n\n// use with tailwind\nmodule.exports = {\n  plugins: [\n    tailwindcss(tailwindConfigComposed),\n  ],\n};\n```\n\n---\n\n## Configuration\n\n#### - compositor.config.js\n\n```\nmodule.exports = {\n  // root unit\n  root: 16,\n\n  // baseline grid height in px units\n  baseline: 8,\n\n  // maximum leading\n  leading: 4,\n\n  // matrix max columns\n  matrix: 4,\n\n  // type scale in px units\n  type: [16, 18, 20, 22, 24, 28, 30, 32, 40, 48, 56, 60, 72],\n\n  // spacing scale in baseline units\n  rhythm: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12],\n\n  // line width in ch units\n  measure: [10, 15, 20, 30, 35, 50, 55, 60, 65],\n\n  // webfonts and vertical metrics\n  fonts: [\n    {\n      key: \"sans-400\",\n      familyName: \"Inter\",\n      fallback: \"sans-serif\",\n      weight: 400,\n      italic: false,\n      upm: 2816,\n      xHeight: 1536,\n      capHeight: 2048,\n      ascent: 2728,\n      descent: -680\n    },\n    {\n      key: 'sans-600',\n      familyName: \"Inter\",\n      fallback: 'sans-serif',\n      file: path.resolve('./fonts/inter/Inter-Semibold.woff2'),\n    },\n  ],\n\n  // compositor options\n  options: {\n    useRem: true,\n    snap: true,\n    type: true,\n    rhythm: true,\n    measure: true,\n    matrix: true,\n    xray: true,\n  },\n}\n```\n\n---\n\n#### 1/9 - root: integer\n\nThe root font size, in `px` units.\n\n---\n\n#### 2/9 - baseline: integer\n\nThe baseline grid row height, in `px` units.\n\n---\n\n#### 3/9 - leading: integer\n\nThe maximum leading value in baseline units.\n\n---\n\n#### 4/9 - matrix: integer\n\nThe maximum columns on the matrix utility\n\n---\n\n#### 5/9 - type : array[integer]\n\n```\ntype: [16, 18, 20, 22, 24, 28, 30, 32, 40, 48, 56, 60, 72]\n```\n\nThe system's typographic scale, in `px` units.\n\n---\n\n#### 6/9 - rhythm : array[integer]\n\n```\nrhythm: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12]\n```\n\nThe system's size and spacing scale, in `baseline` units, used for `rhythm`, `margin`, `padding`, `width/min/max`, `height/min/max` and `grid-gap` utilities\n\n---\n\n#### 7/9 - measure : array[integer]\n\n```\nmeasure: [10, 15, 20, 30, 35, 50, 55, 60, 65]\n```\n\nSeparate scale used for `measure` (line-width) utilities, configured in `ch` units.\n\n---\n\n#### 8/9 - fonts : array[opentype]\n\nThe font scale provides all the information needed to render text styles. Each entry describes a font/weight/style set, and only those that are part of the system will be enabled.\n\nThe `file` property, is used to extract the vertical metrics dynamically from the font-file. If you want to configure the metrics manually, you can omit the `file` prop.\n\nThe `key` property is used to name the utility classes. The configuration bellow will produce four font styles. The recommended convention is `${family}-${weight}${style}`.\n\n1. `font-sans-400` : Inter Regular\n2. `font-sans-400i` : Inter Regular Italic\n3. `font-sans-600i` : Inter Semibold\n4. `font-sans-600i` : Inter Semibold Italic\n\n```\n{\n  key: \"sans-400\",\n  familyName: \"Inter\",\n  fallback: \"sans-serif\",\n  weight: 400,\n  italic: false,\n  upm: 2816,\n  xHeight: 1536,\n  capHeight: 2048,\n  lineGap: 0,\n  ascent: 2728,\n  descent: -680\n},\n{\n  key: 'sans-400i',\n  familyName: \"Inter\",\n  fallback: 'sans-serif',\n  file: path.resolve('./fonts/inter/Inter-Italic.woff2'),\n},\n{\n  key: 'sans-600',\n  familyName: \"Inter\",\n  fallback: 'sans-serif',\n  file: path.resolve('./fonts/inter/Inter-Semibold.woff2'),\n},\n{\n  key: 'sans-600i',\n  familyName: \"Inter\",\n  fallback: 'sans-serif',\n  file: path.resolve('./fonts/inter/Inter-SemiboldItalic.woff2'),\n},\n```\n\n---\n\n#### 9/9 - Options : object\n\nOptions properties, are used to enable/disable individual compositor utilities.\n\nIf `useRem` is set to true, compositor will use the root unit value, to transform all spacing and font-size utilities, to relative units. Line-height will be transformed to unitless ratios.\n\nIf `snap` is true, compositor will align each line text to the nearest baseline grid row, otherwise will trim the line-height above the capHeight and below the baseline, and apply a constant lineGap between lines of text.\n\n-   `useRem: boolean` transform to relative units\n-   `snap: boolean` Align text styles to a baseline grid\n    `type: boolean` Enable typographic utilities\n-   `rhythm: boolean` Enable rhythm utilities\n-   `measure: boolean` Enable measure utilities\n-   `matrix: boolean` Enable matrix utilities\n-   `xray: boolean` Enable debug utilities\n\n```\noptions: {\n  useRem: true,\n  snap: true,\n  type: true,\n  rhythm: true,\n  measure: true,\n  matrix: true,\n  xray: true,\n}\n```\n\n---\n\n## Tailwind Utility Classes\n\n#### 1/7 - Typography\n\n##### Font \u0026 Font Style\n\n-   font: `font-{font-key}`\n\n```\n\n// fonts: [\n// { key: \"sans-400\", ... },\n// { key: 'sans-400i', ... },\n// { key: 'sans-600', ... },\n// { key: 'sans-600i', ... },\n// ],\n\n// sans semibold italic\n\u003ch3 class=\"font-sans-600i\" /\u003e\n\n// sans regular\n\u003cp class=\"font-sans-400\" /\u003e\n\n// sans regular italic\n\u003cp class=\"font-sans-400i\" /\u003e\n```\n\n##### Text Style\n\n-   Text Style : `text-{type_scale_index}/{leading_baseline_units}`\n\n```\n\n// type: [16, 18, 20, 22, 24, 28, 30, 32, 40, 48, 56]\n\n// sans semibold italic - 56px / leading 3\n\u003ch3 class=\"font-sans-600i text-10/3\" /\u003e\n\n// sans regular - 20px / leading 3\n\u003cp class=\"font-sans-400 text-2/3\" /\u003e\n\n// sans regular italic - 18px / leading 2\n\u003cp class=\"font-sans-400i text-1/2\" /\u003e\n```\n\n\n---\n\n#### 2/7 - Line Width\n\n-   `measure-{measure_scale_index}`\n\n```\n// measure: [10, 15, 20, 30, 35, 50, 55, 60, 65]\n\n// 10ch\n\u003cp class=\"measure-0\"\u003eAd proident quis enim duis commodo.\u003c/p\u003e\n\n// 15ch\n\u003cp class=\"measure-1\"\u003eAd proident quis enim duis commodo.\u003c/p\u003e\n\n// 20ch\n\u003cp class=\"measure-2\"\u003eAd proident quis enim duis commodo.\u003c/p\u003e\n\n// 30ch\n\u003cp class=\"measure-3\"\u003eAd proident quis enim duis commodo.\u003c/p\u003e\n```\n\n---\n\n#### 3/7 - Spacing\n\nWhen the tailwind theme is composed, the rhythm scale is transformed to tailwindcss spacing scale and can be used for all spacing utilities, margin, padding and grid-gap.\n\n-   Margin: `m-{rhythm_scale_index}`\n-   Margin Left: `ml-{rhythm_scale_index}`\n-   Padding: `p-{rhythm_scale_index}`\n-   ...etc\n\n```\n\n// rhythm: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12]\n\n\u003csection class=\"px-4 py-5\"\u003e\n  \u003ch3 class=\"sans400 text-7/3 mb-4\" /\u003e\n  \u003cinput type=\"text\" class=\"h-8 mb-4\" /\u003e\n  \u003cp class=\"sans400i text-1/2\" /\u003e\n\u003c/section\u003e\n```\n\n---\n\n#### 4/7 - Size\n\nCompositor also applies the spacing scale to tailwind sizing scales, width, min/max width and also height min/max.\n\n-   Height: `h-{rhythm_scale_index}`\n-   Min Height: `min-h-{rhythm_scale_index}`\n-   Max Height: `max-h-{rhythm_scale_index}`\n-   ...etc\n-\n\n```\n\u003csection class=\"min-h-10 flex flex-col items-end\"\u003e\n  \u003cbutton class=\"h-8\" /\u003e\n\u003c/section\u003e\n```\n\n---\n\n#### 5/7 - Lobotomized Owls\n\n-   Vertical rhythm (alias): `rhythm-{rhythm_scale_index}`\n-   Vertical rhythm: `rhythm-y-{rhythm_scale_index}`\n-   Horizontal Rhythm: `rhythm-x-{rhythm_scale_index}`\n\n```\n\n\u003csection class=\"rhythm-3 lg:rhythm-5\" /\u003e\n  \u003ch3 class=\"sans400 text-7/3\" /\u003e\n  \u003cp class=\"sans400 text-5/3\" /\u003e\n\n  // render horizontally\n  \u003cdiv class=\"flex flex-row rhythm-x-2\" \u003e\n    \u003cbutton /\u003e\n    \u003cbutton /\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n---\n\n#### 6/7 - Matrix Utils\n\n##### Matrix\n-   Matrix: `matrix-{columns_length}`\n-   Matrix Gap: `matrix-gap-{rhythm_scale_index}`\n-   Matrix Gap X: `matrix-gap-x-{rhythm_scale_index}`\n-   Matrix Gap Y: `matrix-gap-y-{rhythm_scale_index}`\n\n##### Cells\nBy default every child of the matrix, will be placed in the next available column and will span for 1 column. In many cases you might not need any cell utilities or only the `cell-span-x` utility.\n\n-   Cell Start X: `cell-start-x-{columns_index}`\n-   Cell Span X: `cell-span-x-{columns_index}`\n\n---\n\n#### 7/7 - Dev Utils\n\n-   Background grid lines: `bg-baseline`\n\n```\n\u003csection class=\"bg-baseline\" /\u003e\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftol-is%2Ftailwind-compositor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftol-is%2Ftailwind-compositor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftol-is%2Ftailwind-compositor/lists"}