View on GitHub

@nativescript/tailwind ​

Makes using Tailwind CSS in NativeScript a whole lot easier!

<label
  text="Tailwind CSS is awesome!"
  class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full"
/>

Usage ​

Tailwind CSS v4 ​

If you need to use Tailwind CSS v4, follow these steps. Tailwind CSS v4 support simplifies the setup significantly over v3.

Install dependencies:

npm install --save @nativescript/tailwind tailwindcss

Import Tailwind: Add the following to your app.css or app.scss:

@import 'tailwindcss';

Upgrading from Tailwind CSS 3 ​

Update dependencies:

npm install --save tailwindcss@latest

Open your app.css or app.scss and replace any existing Tailwind imports with:

@import 'tailwindcss';

Tailwind CSS v3 ​

If you need to use Tailwind CSS v3, follow these steps:

Install dependencies:

npm install --save @nativescript/tailwind tailwindcss

Generate tailwind.config.js:

npx tailwindcss init

Configure tailwind.config.js: When the 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.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // check this setting first for initial setup issues
  content: ['./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
  darkMode: ['class', '.ns-dark'],
  theme: {
    extend: {},
  },
  plugins: [
    /**
     * A simple inline plugin that adds the ios: and android: variants
     *
     * Example usage:
     *
     *   <Label class="android:text-red-500 ios:text-blue-500" />
     *
     */
    plugin(function ({ addVariant }) {
      addVariant('android', '.ns-android &')
      addVariant('ios', '.ns-ios &')
    }),
  ],
  corePlugins: {
    preflight: false, // disables browser-specific resets
  },
}

Include Tailwind directives: Change your app.css or app.scss to include the tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Start using tailwind in your app.

Using a custom PostCSS config ​

Manual PostCSS configuration is typically not required for Tailwind CSS v4. @nativescript/tailwind handles the necessary setup automatically.

However, 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:

// postcss.config.js (Example for v4 with other plugins)

module.exports = {
  plugins: [
    '@nativescript/tailwind', // Handles Tailwind v4 setup
    // Add other PostCSS plugins here
    '@csstools/postcss-is-pseudo-class',
  ],
}

For 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.

// postcss.config.js (Example for v3 customization)

module.exports = {
  plugins: [
    ['tailwindcss', { config: './tailwind.config.custom.js' }],
    '@nativescript/tailwind',
    // Add other PostCSS plugins here
    '@csstools/postcss-is-pseudo-class',
  ],
}

ns config set tailwind.autoload false

Usage with older @nativescript/webpack versions ​

This 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.

npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader

module.exports = {
  plugins: [require('tailwindcss'), require('nativescript-tailwind')],
}

npx tailwindcss init

// tailwind.config.js

module.exports = {
  content: ['./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
  // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false, // disables browser-specific resets
  },
}

@tailwind base;
@tailwind components;
@tailwind utilities;

{
  test: /[\/|\\]app\.css$/,
  use: [
    'nativescript-dev-webpack/style-hot-loader',
    {
      loader: "nativescript-dev-webpack/css2json-loader",
      options: { useForImports: true }
    },
+   'postcss-loader',
  ],
}