Makes using Tailwind in NativeScript a whole lot easier!

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

Install @nativescript/tailwind and tailwindcss

npm install --save @nativescript/tailwind tailwindcss

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

@tailwind components;
@tailwind utilities;

Start using tailwind.

Tailwind's new jit mode is supported, it just has to be enabled in the config. See https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode for details.

To generate a blank config, you can run

npx tailwindcss init

Example config with jit enabled:

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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",
  ],
};

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

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.

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.

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

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

@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',
  ],
}

@nativescript/tailwind ships with a pre-built dist/tailwind.css file that's built using the default tailwind config.

Using the pre-built css is not recommended, since you lose the ability to configure tailwind, jit, purging etc.

@import "@nativescript/tailwind/dist/tailwind.css"

import '@nativescript/tailwind/dist/tailwind.css'

<style src="@nativescript/tailwind/dist/tailwind.css" />