@nativescript/tailwind

Warning

⚠️ @nativescript/[email protected] 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 and prior versions don't support it.

Makes using Tailwind CSS in NativeScript a whole lot easier!

html

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

Tailwind CSS is awesome!

Usage

Note

This guide assumes you are using @nativescript/[email protected] as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older @nativescript/webpack versions.

Install @nativescript/tailwind and tailwindcss

cli

npm install --save @nativescript/tailwind tailwindcss

Generate a tailwind.config.js with

cli

npx tailwindcss init

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
  },
}

Change your app.css or app.scss to include the tailwind utilities

css

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

Start using tailwind in your app.

Using a custom PostCSS config

In case you need to customize the postcss configuration, you can create a postcss.config.js (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:

// postcss.config.js

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

Note

if you want to apply customizations to tailwindcss or @nativescript/tailwind, you will need to disable autoloading:

cli

ns config set tailwind.autoload false

This is required only if you make changes to either of the 2 plugins - because by default postcss-loader processes the config file first, and then the postcssOptions passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting tailwind.autoload to false just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.

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.

See instructions

cli

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

Create postcss.config.js with the following:

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

Generate a tailwind.config.js with

cli

npx tailwindcss init

Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:

// 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
  },
}

Change your app.css or app.scss to include the tailwind utilities

css

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

Update webpack.config.js to use PostCSS

Find the section of the config that defines the rules/loaders for different file types. To quickly find this block - search for rules: [.

For every css/scss block, append the postcss-loader to the list of loaders, for example:

diff

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

Make sure you append postcss-loader to all css/scss rules in the config.

@nativescript/tailwind ​

Usage ​

Using a custom PostCSS config ​

Usage with older @nativescript/webpack versions ​

Contributors

@nativescript/tailwind

Usage

Using a custom PostCSS config

Usage with older @nativescript/webpack versions