{"id":19413126,"url":"https://github.com/maizzle/tailwindcss-mso","last_synced_at":"2025-10-12T04:18:39.176Z","repository":{"id":41846983,"uuid":"289287974","full_name":"maizzle/tailwindcss-mso","owner":"maizzle","description":"Tailwind CSS plugin that generates MSO CSS utilities.","archived":false,"fork":false,"pushed_at":"2025-06-23T08:24:08.000Z","size":1402,"stargazers_count":30,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-17T17:50:18.193Z","etag":null,"topics":["email-marketing","mso","outlook","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/maizzle.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,"zenodo":null}},"created_at":"2020-08-21T14:21:55.000Z","updated_at":"2025-06-23T08:23:03.000Z","dependencies_parsed_at":"2024-01-03T13:31:15.744Z","dependency_job_id":"6d13810f-ecd9-4d71-86e9-5689a5d4f15a","html_url":"https://github.com/maizzle/tailwindcss-mso","commit_stats":{"total_commits":55,"total_committers":2,"mean_commits":27.5,"dds":"0.32727272727272727","last_synced_commit":"3783f69e3b0e034c9575257a490a7852119e80a7"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/maizzle/tailwindcss-mso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Ftailwindcss-mso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Ftailwindcss-mso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Ftailwindcss-mso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Ftailwindcss-mso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maizzle","download_url":"https://codeload.github.com/maizzle/tailwindcss-mso/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Ftailwindcss-mso/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266633319,"owners_count":23959528,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["email-marketing","mso","outlook","tailwindcss"],"created_at":"2024-11-10T12:30:59.949Z","updated_at":"2025-10-12T04:18:34.110Z","avatar_url":"https://github.com/maizzle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-mso\n\n[![Version][npm-version-shield]][npm]\n[![Build][github-ci-shield]][github-ci]\n[![Downloads][npm-stats-shield]][npm-stats]\n[![License][license-shield]][license]\n\nA Tailwind CSS plugin that generates MSO utilities.\n\nUseful when styling HTML emails with Tailwind CSS, like in [Maizzle](https://maizzle.com).\n\n## Installation\n\n```sh\nnpm i tailwindcss-mso\n```\n\n## Usage\n\nIn your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss-mso'),\n  ],\n}\n```\n\nYou can now use the classes in your HTML:\n\n```html\n\u003cp class=\"mso-line-height-rule-exactly\"\u003e...\u003c/p\u003e\n```\n\n## Options\n\nYou may pass options to configure how the plugin generates utilities.\n\n#### respectImportant\n\nType: `Boolean`\\\nDefault: `false`\n\nBy default, the plugin does not respect the `important` option from your Tailwind config, as this may cause issues in Outlook when CSS is inlined.\n\nYou may force it to generate `!important` utilities by setting this to `true`:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss-mso')({\n      respectImportant: true,\n    }),\n  ],\n}\n```\n\nResult:\n\n```html\n\u003cp class=\"mso-hide-all\"\u003e...\u003c/p\u003e\n```\n\n```css\n.mso-hide-all {\n  mso-hide: all !important;\n}\n```\n\n## Arbitrary values\n\nThe plugin supports arbitrary values:\n\n```html\n\u003cp class=\"mso-text-raise-[20px]\"\u003e...\u003c/p\u003e\n```\n\n```css\n.mso-text-raise-\\[20px\\] {\n  mso-text-raise: 20px;\n}\n```\n\n## Negative values\n\nNegative values are also supported, just as you'd expect:\n\n```html\n\u003cp class=\"-mso-text-raise-4\"\u003e...\u003c/p\u003e\n```\n\n```css\n.-mso-text-raise-4 {\n  mso-text-raise: -16px;\n}\n```\n\n## Generated utilities\n\nThe plugin generates both utilities that have default values, as well as utilities based on your Tailwind CSS configuration.\n\n### Spacing utilities\n\nThese utilities also work with values from your `theme.spacing` scale:\n\n- `mso-line-height-alt`\n- `mso-text-indent-alt`\n- `mso-padding-alt` (+ variations)\n- `mso-margin-alt` (+ variations)\n- `mso-para-margin` (+ variations)\n- `mso-text-raise`\n- `mso-font-width`\n- `mso-element-top`, `mso-element-left`\n- `mso-ansi-font-size`, `mso-bidi-font-size`\n- `mso-ansi-font-size`, `mso-bidi-font-size`\n- `mso-element-frame-width`, `mso-element-frame-height`\n- `mso-element-frame-vspace`, `mso-element-frame-hspace`\n- `mso-table-tspace`, `mso-table-rspace`, `mso-table-bspace`, `mso-table-lspace`\n\nWhere it makes sense, these also support negative versions, like `-mso-text-raise-20`.\n\n### Color utilities\n\nThese utilities are all based on your `theme.colors` config:\n\n- `mso-color-alt`\n- `mso-highlight`\n- `text-underline-color`\n- `mso-shading`\n- `mso-shadow-color`\n\n### Border utilities\n\nUtilities for controlling the border styles of elements.\n\nFor border colors:\n\n- `mso-border-alt`\n- `mso-border-between`\n- `mso-border-bottom-alt`\n- `mso-border-left-alt`\n- `mso-border-right-alt`\n- `mso-border-top-alt`\n\nFor border widths:\n\n- `mso-border-between-width`\n- `mso-border-width-alt`\n- `mso-border-bottom-width-alt`\n- `mso-border-left-width-alt`\n- `mso-border-right-width-alt`\n- `mso-border-top-width-alt`\n\nOthers:\n\n- `mso-border-bottom-source`\n- `mso-border-left-source`\n- `mso-border-right-source`\n- `mso-border-top-source`\n- `mso-border-shadow`\n- `mso-border-effect`\n\n\n### Font utilities\n\nThese font size utilities work with values from your `theme.spacing` config:\n\n- `mso-ansi-font-size`\n- `mso-bidi-font-size`\n\nAdditionally, each utility also supports these values: `large`, `larger`, `medium`, `small`, `smaller`, `x-large`, `x-small`, `xx-large`, `xx-small`.\n\n### Other utilities\n\nThe plugin also generates the following utilities with default values:\n\n#### mso-{ansi|bidi}-font-style\n\nValues: `italic`, `normal`, `oblique`\n\n#### mso-{ansi|bidi}-font-weight\n\nValues: `lighter`, `normal`, `bold`, `bolder`\n\n#### mso-{ascii|bidi|arabic}-font-family\n\nValues: `auto`, `cursive`, `fantasy`, `monospace`, `sans-serif`, `serif`\n\n#### mso-bidi-flag\n\nValues: `on`, `off`\n\n#### mso-highlight\n\nValues: `auto`, `windowtext` (+ colors from your config)\n\n#### mso-generic-font-family\n\nValues: `auto`, `decorative`, `modern`, `roman`, `script`, `swiss`\n\n#### mso-element-frame-{width|height}\n\nValues: `auto` (+ values from your `spacing` scale)\n\n#### mso-element\n\nValues: `comment`, `comment-list`, `dropcap-dropped`, `dropcap-in-margin`, `endnote`, `endnote-continuation-notice`, `endnote-continuation-separator`, `endnote-list`, `endnote-separator`, `field-begin`, `field-end`, `field-separator`, `footer`, `footnote`, `footnote-continuation-notice`, `footnote-continuation-separator`, `footnote-list`, `footnote-separator`, `frame`, `header`, `none`, `paragraph-mark-properties`, `table-head`\n\n#### mso-element-left\n\nValues: `center`, `inside`, `left`, `outside`, `right` (+ values from your `spacing` scale)\n\n#### mso-element-top\n\nValues: `bottom`, `inside`, `middle`, `outside`, `top` (+ values from your `spacing` scale)\n\n#### mso-hide\n\nValues: `all`, `none`, `screen`\n\n#### mso-line-height-rule\n\nValues: `at-least`, `exactly`\n\n#### mso-line-height-alt\n\nValues: `normal`  (+ values from your `spacing` scale)\n\n\n[npm]: https://www.npmjs.com/package/tailwindcss-mso\n[npm-stats]: https://npm-stat.com/charts.html?package=tailwindcss-mso\u0026from=2020-08-23\n[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-mso.svg\n[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-mso.svg?color=6875f5\n[github-ci]: https://github.com/maizzle/tailwindcss-mso/actions\n[github-ci-shield]: https://github.com/maizzle/tailwindcss-mso/actions/workflows/nodejs.yml/badge.svg\n[license]: ./LICENSE\n[license-shield]: https://img.shields.io/npm/l/tailwindcss-mso.svg?color=0e9f6e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaizzle%2Ftailwindcss-mso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaizzle%2Ftailwindcss-mso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaizzle%2Ftailwindcss-mso/lists"}