{"id":14962222,"url":"https://github.com/nativescript/tailwind","last_synced_at":"2025-05-16T00:07:36.230Z","repository":{"id":36986005,"uuid":"137405081","full_name":"NativeScript/tailwind","owner":"NativeScript","description":"Makes using TailwindCSS in NativeScript a whole lot easier!","archived":false,"fork":false,"pushed_at":"2025-04-18T17:36:38.000Z","size":812,"stargazers_count":155,"open_issues_count":21,"forks_count":31,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-10T21:24:46.849Z","etag":null,"topics":["css","nativescript","postcss","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"NativeScript","open_collective":"nativescript"}},"created_at":"2018-06-14T20:18:43.000Z","updated_at":"2025-04-29T03:18:09.000Z","dependencies_parsed_at":"2023-02-12T19:40:25.706Z","dependency_job_id":"b2021561-7d90-4360-81d3-70fb3aac0e8a","html_url":"https://github.com/NativeScript/tailwind","commit_stats":{"total_commits":69,"total_committers":8,"mean_commits":8.625,"dds":0.2753623188405797,"last_synced_commit":"fae88eece49ee5f6df4cf0de1a715768a4dd765c"},"previous_names":["rigor789/nativescript-tailwind"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442855,"owners_count":22071878,"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","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":["css","nativescript","postcss","tailwind","tailwindcss"],"created_at":"2024-09-24T13:29:44.346Z","updated_at":"2025-05-16T00:07:36.211Z","avatar_url":"https://github.com/NativeScript.png","language":"JavaScript","readme":"# @nativescript/tailwind\n\n\u003e **Warning**: :warning: For **Tailwind CSS v3**, `@nativescript/core@8.2.0` is required for colors to work properly. You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0. **Tailwind CSS v4** uses Lightning CSS which handles this automatically.\n\nMakes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot easier!\n\n```html\n\u003clabel\n  text=\"Tailwind CSS is awesome!\"\n  class=\"px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full\"\n/\u003e\n```\n\n![Tailwind CSS is awesome!](https://user-images.githubusercontent.com/879060/81098285-73e3ad80-8f09-11ea-8cfa-7e2ec2eebcde.png)\n\n## Usage\n\n\u003e **Note:** This guide assumes you are using `@nativescript/webpack@5.x` or higher. If you have not upgraded yet, please read the docs below for usage with older `@nativescript/webpack` versions (applicable to Tailwind CSS v3).\n\n### Tailwind CSS v4\n\nIf you need to use Tailwind CSS v4, follow these steps. Tailwind CSS v4 [support](https://github.com/NativeScript/tailwind/pull/194) simplifies the setup significantly over v3.\n\n**Install dependencies:**\n\n```cli\nnpm install --save @nativescript/tailwind tailwindcss\n```\n\n**Import Tailwind:** Add the following to your `app.css` or `app.scss`:\n\n```css\n@import 'tailwindcss';\n```\n\n#### Upgrading from Tailwind CSS 3\n\n**Update dependencies:**\n\n```cli\nnpm install --save tailwindcss@latest\n```\n\nOpen your `app.css` or `app.scss` and replace any existing Tailwind imports with:\n\n```css\n@import 'tailwindcss';\n```\n\n### Tailwind CSS v3 \n\nIf you need to use Tailwind CSS v3, follow these steps:\n\n**Install dependencies:**\n\n```cli\nnpm install --save @nativescript/tailwind tailwindcss\n```\n\n**Generate `tailwind.config.js`:**\n\n```cli\nnpx tailwindcss init\n```\n\n**Configure `tailwind.config.js`:** When the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) creates a new project, it may put code into a `src` folder instead of the `app` referenced below. Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need. Here are the values we recommend. **If you're struggling to get Tailwind working for the first time, check the `content` setting.**\n\n```js\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  // check this setting first for initial setup issues\n  content: [\n    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'\n  ],\n  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.\n  darkMode: ['class', '.ns-dark'],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    /**\n     * A simple inline plugin that adds the ios: and android: variants\n     * \n     * Example usage: \n     *\n     *   \u003cLabel class=\"android:text-red-500 ios:text-blue-500\" /\u003e\n     *\n     */\n    plugin(function ({ addVariant }) {\n      addVariant('android', '.ns-android \u0026');\n      addVariant('ios', '.ns-ios \u0026');\n    }),\n  ],\n  corePlugins: {\n    preflight: false // disables browser-specific resets\n  }\n}\n```\n\n**Include Tailwind directives:** Change your `app.css` or `app.scss` to include the tailwind directives:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nStart using tailwind in your app.\n\n### Using a custom PostCSS config\n\nManual PostCSS configuration is typically **not required** for **Tailwind CSS v4**. `@nativescript/tailwind` handles the necessary setup automatically.\n\nHowever, if you need to add *other* PostCSS plugins alongside Tailwind v4, create a `postcss.config.js` (or other supported formats, see https://github.com/webpack-contrib/postcss-loader#config-files) and include `@nativescript/tailwind`:\n\n```js\n// postcss.config.js (Example for v4 with other plugins)\n\nmodule.exports = {\n  plugins: [\n    \"@nativescript/tailwind\", // Handles Tailwind v4 setup\n    // Add other PostCSS plugins here\n    \"@csstools/postcss-is-pseudo-class\" \n  ],\n};\n```\n\nFor **Tailwind CSS v3**, if you need to customize the postcss configuration (e.g., use a custom `tailwind.config.custom.js`), you can create a `postcss.config.js` file.\n\n```js\n// postcss.config.js (Example for v3 customization)\n\nmodule.exports = {\n  plugins: [\n    [\"tailwindcss\", { config: \"./tailwind.config.custom.js\" }],\n    \"@nativescript/tailwind\",\n    // Add other PostCSS plugins here\n    \"@csstools/postcss-is-pseudo-class\" \n  ],\n};\n```\n\n\u003e **Note (Tailwind CSS v3):** If you want to apply customizations to `tailwindcss` or `@nativescript/tailwind` in v3 using a custom PostCSS config, you will need to disable autoloading:\n\u003e \n\u003e ```cli\n\u003e ns config set tailwind.autoload false\n\u003e ```\n\n## Usage with older @nativescript/webpack versions\n\nThis usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older `@nativescript/webpack`. **This applies to Tailwind CSS v3 setups.**\n\n\u003cdetails\u003e\n\n  \u003csummary\u003eSee instructions\u003c/summary\u003e\n\n  ```cli\n  npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader\n  ```\n\n  Create `postcss.config.js` with the following:\n\n  ```js\n  module.exports = {\n    plugins: [\n        require('tailwindcss'),\n        require('nativescript-tailwind')\n    ]\n  }\n  ```\n\n\n  Generate a `tailwind.config.js` with\n\n  ```cli\n  npx tailwindcss init\n  ```\n\n  Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need, here are the values we recommend: \n  \n  ```js\n  // tailwind.config.js\n\n  module.exports = {\n    content: [\n      './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'\n    ],\n    // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript\n    darkMode: 'class',\n    theme: {\n      extend: {},\n    },\n    plugins: [],\n    corePlugins: {\n      preflight: false // disables browser-specific resets\n    }\n  }\n  ```\n\n  Change your `app.css` or `app.scss` to include the tailwind utilities\n\n  ```css\n  @tailwind base;\n  @tailwind components;\n  @tailwind utilities;\n  ```\n\n  Update `webpack.config.js` to use PostCSS\n  \n  Find the section of the config that defines the rules/loaders for different file types.\n  To quickly find this block - search for `rules: [`.\n\n  For every css/scss block, append the `postcss-loader` to the list of loaders, for example:\n\n  ```diff\n  {\n    test: /[\\/|\\\\]app\\.css$/,\n    use: [\n      'nativescript-dev-webpack/style-hot-loader',\n      {\n        loader: \"nativescript-dev-webpack/css2json-loader\",\n        options: { useForImports: true }\n      },\n  +   'postcss-loader',\n    ],\n  }\n  ```\n  \n  **Make sure you append `postcss-loader` to all css/scss rules in the config.**\n\n\u003c/details\u003e\n","funding_links":["https://github.com/sponsors/NativeScript","https://opencollective.com/nativescript"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Ftailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Ftailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Ftailwind/lists"}