{"id":38757144,"url":"https://github.com/aparajita/tailwind-ionic","last_synced_at":"2026-01-17T11:54:24.794Z","repository":{"id":57714513,"uuid":"516479087","full_name":"aparajita/tailwind-ionic","owner":"aparajita","description":"Tailwind utilities for Ionic","archived":false,"fork":false,"pushed_at":"2024-04-23T21:11:58.000Z","size":208,"stargazers_count":34,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-13T01:43:47.930Z","etag":null,"topics":["ionic","ionic-framework","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/aparajita.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-07-21T18:20:58.000Z","updated_at":"2025-02-05T09:57:55.000Z","dependencies_parsed_at":"2024-04-23T22:28:43.219Z","dependency_job_id":"9541b269-b037-437a-98b8-aad1ced6643c","html_url":"https://github.com/aparajita/tailwind-ionic","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"b511a54362e033bf721cd0ec619df67975f280a9"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/aparajita/tailwind-ionic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Ftailwind-ionic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Ftailwind-ionic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Ftailwind-ionic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Ftailwind-ionic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aparajita","download_url":"https://codeload.github.com/aparajita/tailwind-ionic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Ftailwind-ionic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28508462,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T11:50:55.898Z","status":"ssl_error","status_checked_at":"2026-01-17T11:50:55.569Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["ionic","ionic-framework","tailwind","tailwindcss"],"created_at":"2026-01-17T11:54:24.713Z","updated_at":"2026-01-17T11:54:24.774Z","avatar_url":"https://github.com/aparajita.png","language":"CSS","readme":"\u003cdiv class=\"markdown-body\"\u003e\n\n# @aparajita/tailwind-ionic\u0026nbsp;\u0026nbsp;[![npm version](https://badge.fury.io/js/@aparajita%2Ftailwind-ionic.svg)](https://badge.fury.io/js/@aparajita%2Ftailwind-ionic)\n\nThis plugin for [Tailwind CSS](https://tailwindcss.com/) and [Ionic](https://ionic-framework.com) provides several features:\n\n- Variants which help you to target specific platforms and modes in an Ionic application.\n- A `part` variant to target CSS parts in an Ionic component (or any other component that uses CSS parts).\n- Ionic CSS theme variables are converted into Tailwind colors.\n- An `ion-checked` variant to target the checked state of an Ionic checkbox or radio button. \n\n## Breaking changes from v1.x\n- The non-abbreviated variants (prefixed with \"ion-\") in v1.x have been removed.\n- The `ios` and `md` variants have been renamed to `mode-ios` and `mode-md`, and only apply to the `mode` attribute of the `html` element.\n\n## Installation\n\n```shell\npnpm add @aparajita/tailwind-ionic\n```\n\nIf you only want the default variants and no Ionic theme colors, add the plugin to your `tailwind.config.js` file:\n\n```javascript\nmodule.exports = {\n  plugins: [require('@aparajita/tailwind-ionic')]\n}\n```\n\nIf you want to configure the behavior, read on.\n\n## Usage\n\n### Platform/mode variants\n\nThe platform/mode variants in the table below are supported. Variants lower in the list are more specific and are applied after variants higher in the list. This means that a less specific variant applied to a given class will be overridden by a more specific variant applied to the same class.\n\nNote that you cannot combine variants directly, but you can combine the effect of separate variants.\n\n| Variant       | Target                                             |\n|:--------------|:---------------------------------------------------|\n| plt-desktop   | Desktop mode                                       |\n| plt-mobile    | Mobile-like device (including browser simulations) |\n| plt-mobileweb | Mobile device simulation mode in a browser         |\n| plt-native    | Real device using Capacitor                        |\n| plt-ios       | iOS device (including browser simulations)         |\n| plt-android   | Android device (including browser simulations)     |\n| mode-ios      | App is in iOS style mode                           |\n| mode-md       | App is in Material Design style mode               |\n\n#### Examples (with abbreviated variant names)\n\n```html\n\u003c!-- BAD. Can't combine these variants with others directly. --\u003e\n\u003cion-label class=\"plt-native:plt-ios:text-ion-color-primary\" /\u003e\n\n\u003c!-- \n  GOOD. Separate variants combine.\n  On a real iOS device, bold blue color. \n  On a real Android device, bold yellow color. \n--\u003e\n\u003cion-label\n  class=\"\n  plt-native:font-bold\n  plt-ios:text-blue-500\n  plt-android:text-yellow-500\n\"\n/\u003e\n\n\u003c!-- GOOD. More specific variant overrides. On a real iOS device, red color. --\u003e\n\u003cion-label class=\"plt-native:text-blue-500 plt-ios:text-red-500\" /\u003e\n```\n\n### Part variants\n\nThe `part-` variant allows you to target CSS parts in an Ionic component (or any other component that uses CSS parts). All of the currently defined component parts are provided as auto-complete suggestions in your editor. Part variants can be combined with other variants.\n\n#### Examples\n\n```html\n\u003c!-- Make a button fully rounded --\u003e\n\u003cion-button class=\"part-native:rounded-full\" /\u003e\n\n\u003c!-- Equivalent to: --\u003e\n\u003cion-button class=\"my-button\" /\u003e\n\n\u003cstyle\u003e\n  .my-button::part(native) {\n    @apply rounded-full;\n  }\n\u003c/style\u003e\n```\n\n### Checked variant\n\nThe `ion-checked` variant allows you to target the checked state of an `ion-checkbox` or `ion-radio`. It can be combined with other variants, in particular the `part-` variant, to accomplish complex styling of `ion-checkbox` and `ion-radio` components entirely with Tailwind.\n\n#### Examples\n\nHere is a radio group using images for the radio buttons. The checked state is indicated by a blue ring.\n\n![Radio group with images](./example.png)\n\nHere is the markup:\n\n```html\n\u003cion-radio-group\n  v-model=\"appearance\"\n  class=\"flex w-full justify-around pt-5 pb-3\"\n\u003e\n  \u003cdiv\n    v-for=\"info in kAppearanceInfo\"\n    :key=\"info.label\"\n    class=\"relative flex flex-col items-center\"\n  \u003e\n    \u003cion-radio\n      :value=\"info.value\"\n      class=\"m-0 h-[80px] w-[72px] rounded-lg part-container:border-none part-mark:hidden ion-checked:ring ion-checked:ring-blue-500\"\n    /\u003e\n    \u003cimg\n      :src=\"info.src\"\n      :alt=\"info.label\"\n      class=\"absolute inset-0 h-[80px] w-[72px] rounded-lg border\"\n      :class=\"info.class\"\n    /\u003e\n    \u003cp class=\"mt-2 text-sm text-ion-color-dark\"\u003e\n      {{ info.label }}\n    \u003c/p\u003e\n  \u003c/div\u003e\n\u003c/ion-radio-group\u003e\n```\n\nOr, for example, if you want a checkbox to be `yellow-500` in the unchecked state and `indigo-500` with an `indigo-400` border in the checked state, you would do this:\n\n```html\n\u003cion-checkbox\n  class=\"\n    part-container:!bg-yellow-500 \n    ion-checked:part-container:!bg-indigo-500 \n    ion-checked:part-container:!border-indigo-400\n  \"\n/\u003e\n```\n\nNote that `part-container` is used to target the checkbox markup itself and `!` is necessary to override the Ionic styles.\n\n### Theme colors\n\nIf you pass the plugin one or more valid paths to a CSS file containing Ionic theme variables, they are converted into Tailwind theme colors.\n\n```javascript\n/** @type {import('tailwindcss/types').Config} */\n/** @type {import('@aparajita/tailwind-ionic').plugin} */\n\nconst ionic = require('@aparajita/tailwind-ionic')\n\nmodule.exports = {\n  plugins: [ionic('src/theme/variables.css')]\n}\n```\n\nYou may also pass the path as a `.theme` property of an options object, or an array of strings or objects with a `.theme` property. This allows you to access the Ionic theme files along with your own customizations.\n\n```javascript\n/** @type {import('tailwindcss/types').Config} */\n/** @type {import('@aparajita/tailwind-ionic').plugin} */\n\nconst ionic = require('@aparajita/tailwind-ionic')\n\nmodule.exports = {\n  plugins: [ionic({\n    theme: 'src/theme/variables.css',\n  })]\n}\n```\n\n```javascript\n/** @type {import('tailwindcss/types').Config} */\n/** @type {import('@aparajita/tailwind-ionic').plugin} */\n\nconst ionic = require('@aparajita/tailwind-ionic')\n\nmodule.exports = {\n  plugins: [ionic([\n    'src/theme/variables.css',\n    'assets/css/theme.css',\n    require.resolve('@ionic/vue/css/palettes/dark.class.css'),\n  )]\n}\n```\n\n#### Example\n\nIf the file `variables.css` is this:\n\n```css\n/** Ionic CSS Variables **/\n:root {\n  /** primary **/\n  --ion-color-primary: #3880ff;\n  --ion-color-primary-rgb: 56, 128, 255;\n  --ion-color-primary-contrast: #ffffff;\n  --ion-color-primary-contrast-rgb: 255, 255, 255;\n  --ion-color-primary-shade: #3171e0;\n  --ion-color-primary-tint: #4c8dff;\n\n  /* ...lots more */\n}\n```\n\nthen your effective Tailwind config ends up being this:\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        // ...whatever colors you have in your tailwind.config.js\n        \n        'ion-color-primary': 'var(--ion-color-primary)',\n        'ion-color-primary-rgb': 'var(--ion-color-primary-rgb)',\n        'ion-color-primary-contrast': 'var(--ion-color-primary-contrast)',\n        'ion-color-primary-contrast-rgb': 'var(--ion-color-primary-contrast-rgb)',\n        'ion-color-primary-shade': 'var(--ion-color-primary-shade)',\n        'ion-color-primary-tint': 'var(--ion-color-primary-tint)',\n        // ...and so on\n      }\n    }\n  }\n}\n```\n\nBecause the variables are part of the color palette, they are added into all of the Tailwind color utilities: text, bg, border, etc.\n\n```html\n\u003cion-label class=\"text-ion-color-primary\"\u003eMy label\u003c/ion-label\u003e\n\u003cspan class=\"text-ion-color-success\"\u003eSuccess!\u003c/span\u003e\n\u003cdiv class=\"bg-ion-color-background\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"border-ion-color-tertiary-tint\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n```\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faparajita%2Ftailwind-ionic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faparajita%2Ftailwind-ionic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faparajita%2Ftailwind-ionic/lists"}