{"_id":"@amj7/nativescript-tailwind-shadcn-vue-colors","_rev":"4-4f5596b76fb7900b8ea64b4bb705f363","name":"@amj7/nativescript-tailwind-shadcn-vue-colors","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@amj7/nativescript-tailwind-shadcn-vue-colors","version":"1.0.0","keywords":["nativescript","tailwind","tailwindcss","colors","theme","preset","shadcn-vue"],"author":{"name":"ArthurMJ96"},"license":"MIT","_id":"@amj7/nativescript-tailwind-shadcn-vue-colors@1.0.0","maintainers":[{"name":"amj7","email":"1114aze@gmail.com"}],"dist":{"shasum":"b8a29bdb0adbd2a4d2e463d6a0341f3edd25effa","tarball":"https://registry.npmjs.org/@amj7/nativescript-tailwind-shadcn-vue-colors/-/nativescript-tailwind-shadcn-vue-colors-1.0.0.tgz","fileCount":19,"integrity":"sha512-p99mgOG0kcao9gt/bouuDb26tU6aeR6nXkkZgDlNdVXGjdRFEs91+qwceI7U81zYjZfZRbZoFZQ/ISz/Hd0uQw==","signatures":[{"sig":"MEQCIC6D0FQrCNp1+KuxFHyOs39EsP8h00ed16HTCFjYOvKJAiBvsCxRjgpaa+wZmd+rMMZImLFxc/8A/n+Imc3LIydjjw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22223},"main":"index.js","types":"./index.d.ts","gitHead":"cc614aeae75d71925ae603ef3d9ee7816133de12","_npmUser":{"name":"amj7","email":"1114aze@gmail.com"},"_npmVersion":"11.0.0","description":"NativeScript Tailwind CSS plugin that provides shadcn-vue color classes and css variables","directories":{},"_nodeVersion":"23.6.1","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nativescript-tailwind-shadcn-vue-colors_1.0.0_1740058316232_0.14819527363897667","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amj7/nativescript-tailwind-shadcn-vue-colors","version":"1.0.1","keywords":["nativescript","tailwind","tailwindcss","colors","theme","preset","shadcn-vue"],"author":{"name":"ArthurMJ96"},"license":"MIT","_id":"@amj7/nativescript-tailwind-shadcn-vue-colors@1.0.1","maintainers":[{"name":"amj7","email":"1114aze@gmail.com"}],"homepage":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors#readme","bugs":{"url":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors/issues"},"dist":{"shasum":"377ce88105a9953390f76ace874e048d8276e834","tarball":"https://registry.npmjs.org/@amj7/nativescript-tailwind-shadcn-vue-colors/-/nativescript-tailwind-shadcn-vue-colors-1.0.1.tgz","fileCount":19,"integrity":"sha512-My5jUPv6mHvtYB9w3+MvDOmReNVSUzQyZ0WXOU8bRTwS7Y82+dL80NGoU2foszCfXbC61qo3m9j9d+jnkLuDMw==","signatures":[{"sig":"MEUCIAmgs16jKwZIBY4OVudhijQ483ReRgNoy3ondGNTp8dDAiEAlGVFwQl2LAugGWwlMGHf73kbtN5p9U8PezGS/pEGws4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24448},"main":"index.js","types":"./index.d.ts","gitHead":"9c06586c1016c7c6123465009097b39a6ccf1bf2","_npmUser":{"name":"amj7","email":"1114aze@gmail.com"},"repository":{"url":"git+https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors.git","type":"git"},"_npmVersion":"11.0.0","description":"NativeScript Tailwind CSS plugin that provides shadcn-vue color classes and css variables","directories":{},"_nodeVersion":"23.6.1","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nativescript-tailwind-shadcn-vue-colors_1.0.1_1740064380230_0.022330652532451145","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@amj7/nativescript-tailwind-shadcn-vue-colors","version":"1.0.2","keywords":["NativeScript","nativescript","tailwind","tailwindcss","colors","theme","preset","shadcn-vue"],"author":{"name":"ArthurMJ96"},"license":"MIT","_id":"@amj7/nativescript-tailwind-shadcn-vue-colors@1.0.2","maintainers":[{"name":"amj7","email":"1114aze@gmail.com"}],"homepage":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors#readme","bugs":{"url":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors/issues"},"dist":{"shasum":"1489b9829f3c87a6102d745142aad60a24092fd7","tarball":"https://registry.npmjs.org/@amj7/nativescript-tailwind-shadcn-vue-colors/-/nativescript-tailwind-shadcn-vue-colors-1.0.2.tgz","fileCount":19,"integrity":"sha512-+2cj6RsnGDjQLfQy45ouiXYcZImYPurL1w5RxaNmcu2rglSn1e9M++pwcM94AZjIgC46w9F92cVBGj8TQhKhrw==","signatures":[{"sig":"MEYCIQDtUMh8t4gR2wlAg/RrmmkoJyUXB5ZPZuc2YYDrvS7oOgIhANl887i/T4XibYu/tPH7q6xZTIS/FZPIj6C3ZM327hy8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24567},"main":"index.js","types":"./index.d.ts","gitHead":"c9ea42164feeab5ae65946b7a8c253696340b25d","_npmUser":{"name":"amj7","email":"1114aze@gmail.com"},"repository":{"url":"git+https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors.git","type":"git"},"_npmVersion":"11.2.0","description":"NativeScript Tailwind CSS plugin that provides shadcn-vue color classes and css variables","directories":{},"_nodeVersion":"23.6.1","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nativescript-tailwind-shadcn-vue-colors_1.0.2_1742138502170_0.10272768584214198","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@amj7/nativescript-tailwind-shadcn-vue-colors","version":"1.0.3","description":"NativeScript Tailwind CSS plugin that provides shadcn-vue color classes and css variables","main":"index.js","keywords":["NativeScript","nativescript","tailwind","tailwindcss","colors","theme","preset","shadcn-vue"],"license":"MIT","peerDependencies":{"tailwindcss":">=3.0.0"},"author":{"name":"ArthurMJ96"},"repository":{"type":"git","url":"git+https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors.git"},"_id":"@amj7/nativescript-tailwind-shadcn-vue-colors@1.0.3","gitHead":"3d23a53b63bd1c40d91e160680720dfcc6a1fda4","types":"./index.d.ts","bugs":{"url":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors/issues"},"homepage":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors#readme","_nodeVersion":"23.6.1","_npmVersion":"11.2.0","dist":{"integrity":"sha512-Z0IjSK4BlND7BId3KuLTQd4QZbpno6eLhqJaAW5xITwd2LH7Ds0xvtlr5F0Kjs+FLpA5iLm0W21I/v7HB8/FwQ==","shasum":"8fedb5ff91cd37f8904d99a922bb89f2eb829e92","tarball":"https://registry.npmjs.org/@amj7/nativescript-tailwind-shadcn-vue-colors/-/nativescript-tailwind-shadcn-vue-colors-1.0.3.tgz","fileCount":19,"unpackedSize":24568,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCRGINY6la9fhKJKYAj/oostVuvihQo8D7Yt6m+9NYjFgIgcVeb7en57L82sXge3nExX4sxmGezXhlRDga8E3m7rGI="}]},"_npmUser":{"name":"amj7","email":"1114aze@gmail.com"},"directories":{},"maintainers":[{"name":"amj7","email":"1114aze@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nativescript-tailwind-shadcn-vue-colors_1.0.3_1748185755973_0.9229793200445453"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-20T13:31:56.129Z","modified":"2025-05-25T15:09:16.370Z","1.0.0":"2025-02-20T13:31:56.394Z","1.0.1":"2025-02-20T15:13:00.410Z","1.0.2":"2025-03-16T15:21:42.369Z","1.0.3":"2025-05-25T15:09:16.171Z"},"bugs":{"url":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors/issues"},"author":{"name":"ArthurMJ96"},"license":"MIT","homepage":"https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors#readme","keywords":["NativeScript","nativescript","tailwind","tailwindcss","colors","theme","preset","shadcn-vue"],"repository":{"type":"git","url":"git+https://github.com/ArthurMJ96/nativescript-tailwind-shadcn-vue-colors.git"},"description":"NativeScript Tailwind CSS plugin that provides shadcn-vue color classes and css variables","maintainers":[{"name":"amj7","email":"1114aze@gmail.com"}],"readme":"This plugin helps you integrate shadcn-vue classes into your Tailwind CSS setup.\r\n\r\n```js\r\ncolors: {\r\n  border: \"hsl(var(--border))\",\r\n  input: \"hsl(var(--input))\",\r\n  ring: \"hsl(var(--ring))\",\r\n  background: \"hsl(var(--background))\",\r\n  foreground: \"hsl(var(--foreground))\",\r\n  ...\r\n```\r\n\r\nBonus: Contains an optional plugin to add some handy NS responsive modifiers:\r\n\r\n```js\r\naddVariant(\"l\", \".ns-light &\"); // l:border\r\naddVariant(\"d\", \".ns-dark &\"); // d:border-2\r\naddVariant(\"ios\", \".ns-ios &\"); // ios:py-10\r\naddVariant(\"android\", \".ns-android &\"); // android:border-none\r\naddVariant(\"tablet\", \".ns-tablet &\"); // tablet:w-48\r\n```\r\n\r\n# Usage\r\n\r\n### Install\r\n\r\n```\r\nnpm i @amj7/nativescript-tailwind-shadcn-vue-colors\r\n```\r\n\r\n### Setup in `tailwind.config.js`\r\n\r\n<details>\r\n  <summary>For fast drop-in:</summary>\r\n  In your `tailwind.config.js`:\r\n\r\n```js\r\nconst { theme, plugins } =\r\n  require(\"@amj7/nativescript-tailwind-shadcn-vue-colors\")(); // <- it's a function!\r\n\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\"./src/**/*.{css,xml,html,vue,svelte,ts,tsx}\"],\r\n  darkMode: [\"class\", \".ns-dark\"],\r\n  theme, // <-- Add theme\r\n  plugins, // <-- (Optional) Add responsive modifiers\r\n  corePlugins: {\r\n    preflight: false,\r\n  },\r\n};\r\n```\r\n\r\n</details>\r\n\r\n<details>\r\n  <summary>Mix in with your stuff:</summary>\r\nIn your `tailwind.config.js`:\r\n\r\n```js\r\nconst { theme, plugins } =\r\n  require(\"@amj7/nativescript-tailwind-shadcn-vue-colors\")();\r\n\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\"./src/**/*.{css,xml,html,vue,svelte,ts,tsx}\"],\r\n  darkMode: [\"class\", \".ns-dark\"],\r\n  theme: {\r\n    extend: {\r\n      ...theme.extend, // Method 1: Add theme.extend\r\n\r\n      // Method 2: add container, colors and borderRadius individually\r\n      container: theme.extend.container,\r\n      colors: theme.extend.colors,\r\n      borderRadius: theme.extend.borderRadius,\r\n    },\r\n  },\r\n  plugins: [\r\n    ...plugins, // <-- (Optional) Add responsive modifiers\r\n    yourPluginHere,\r\n  ],\r\n  corePlugins: {\r\n    preflight: false,\r\n  },\r\n};\r\n```\r\n\r\n</details>\r\n\r\n### Add theme to your `app.css`\r\n\r\nIncluded theme files:\r\n`zinc` ,`rose` ,`blue` ,`green` ,`orange` ,`red` ,`slate` ,`stone` ,`gray` ,`neutral` ,`yellow` ,`violet`\r\n\r\n```css\r\n@import \"@amj7/nativescript-tailwind-shadcn-vue-colors/themes/zinc.css\"; /* THIS */\r\n@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n```\r\n\r\n# Themes\r\n\r\nThe included themes (CSS variable preset files) are taken from [Theming - shadcn-vue](https://www.shadcn-vue.com/themes.html) with a border radius of 0.5.  \r\nMinor modifications include adding base definitions for `Page` and `ActionBar` (see `themes/_base.css`).\r\n\r\nYou can create your own theme by using one of the provided themes as a template (see `themes/zinc.css`).  \r\nAlternatively, use `themes/_template.css` if you want to copy and paste a different variant from [shadcn-vue](https://www.shadcn-vue.com/themes.html).\r\n\r\n<details>\r\n  <summary>Example template</summary>\r\n\r\n```css\r\n@import \"@amj7/nativescript-tailwind-shadcn-vue-colors/themes/_base.css\";\r\n\r\n.ns-root,\r\n.ns-modal {\r\n  /* :root content here */\r\n}\r\n\r\n.ns-root.ns-dark,\r\n.ns-modal.ns-dark {\r\n  /* .dark content here */\r\n}\r\n```\r\n\r\n</details>\r\n\r\n# Bonus\r\n\r\n### Example usage with `@nativescript/theme-switcher`\r\n\r\nInstall `theme-switcher` and/or follow [@nativescript/theme-switcher](https://github.com/NativeScript/plugins/tree/main/packages/theme-switcher) setup guide\r\n\r\n```sh\r\nnpm install @nativescript/theme-switcher\r\n```\r\n\r\nCall this function in the app's `app.ts` or `main.ts` file, before the app starts.\r\n\r\n```ts\r\nimport { initThemes } from \"@nativescript/theme-switcher\";\r\n\r\ninitThemes({\r\n  default: () => import(`theme-loader!@amj7/nativescript-tailwind-shadcn-vue-colors/themes/zinc.css`),\r\n  green: () => import(`theme-loader!@amj7/nativescript-tailwind-shadcn-vue-colors/themes/green.css`),\r\n  blue: () => import(`theme-loader!@amj7/nativescript-tailwind-shadcn-vue-colors/themes/blue.css`),\r\n\r\n  // custom: () => import('theme-loader!./themes/example.css'),\r\n})\r\n```\r\n\r\nExample usage:\r\n\r\n```ts\r\nimport { switchTheme } from \"@nativescript/theme-switcher\";\r\n\r\nasync function onTap() {\r\n  const res = await action(\"Select theme\", \"Cancel\", [\r\n    \"default\",\r\n    \"green\",\r\n    \"blue\",\r\n  ]);\r\n\r\n  if (res && res !== \"Cancel\") {\r\n    switchTheme(res);\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md"}