nativescript-tailwind

Like using Tailwind? You can use it in NativeScript with a little help from this package!

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

Usage

First, install the package into your project

npm install --save nativescript-tailwind

Then you can use it in a couple ways:

1. Pre Built CSS (Quickest for protyping)
2. Build the CSS based on your own config
3. Use as a PostCSS plugin (Recommended)

1. Pre Built CSS

Import the built css based on the default tailwindcss config from nativescript-tailwind/dist/tailwind.css

This is the easiest and quickest way to try out Tailwind in NativeScript, but you are limited to the default config.

There are a couple ways to do this, for example in a Vue component you can add

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

Or import it in a css file

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

Or import it in your main.js

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

2. Build the CSS based on your own config

This package ships with an executable script which can build your css file using your own tailwind config.

node node_modules/.bin/nativescript-tailwind tailwind.config.js
# or
npx nativescript-tailwind tailwind.config.js

3. Use as a PostCSS plugin

To use tailwind with NativeScript, you need to set up PostCSS, below are 2 guides depending on what css flavor you prefer.

1. Install dependencies

$ yarn add -D tailwindcss nativescript-tailwind postcss postcss-loader
$ # or using npm
$ npm install --save-dev tailwindcss nativescript-tailwind postcss postcss-loader

2. Initialize a tailwind.config.js (optional)

To create a tailwind.config.js run

$ npx tailwindcss init

This will create a blank tailwind.config.js where you will be able to tweak the default configuration.

3. Create a postcss.config.js

In the root of your project, create a new file and name it postcss.config.js with the following contents

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

4. Add tailwind to your css

Replace your app.css contents with the following 2 tailwind at-rules to pull in tailwind.

Note: if you already have custom css in your app.css you don't have to delete it, the above is only true for fresh projects.

@tailwind components;
@tailwind utilities;

5. 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 test: /[\/|\\]app\.css$/.

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

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

Make sure you repeat this step for every css rule (4 by default)

6. Test if everything works!

Add some tailwind classes to your layout

<Label class="font-bold text-red-500" text="this text should be bold and red!" />

And run the app. If the label is bold and red - everything is working, happy tailwinding!

1. Install dependencies

$ yarn add -D tailwindcss nativescript-tailwind postcss postcss-loader
$ # or using npm
$ npm install --save-dev tailwindcss nativescript-tailwind postcss postcss-loader

2. Initialize a tailwind.config.js (optional)

To create a tailwind.config.js run

$ npx tailwindcss init

This will create a blank tailwind.config.js where you will be able to tweak the default configuration.

3. Create a postcss.config.js

In the root of your project, create a new file and name it postcss.config.js with the following contents

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

4. Add tailwind to your scss

Replace your app.scss contents with the following 2 tailwind at-rules to pull in tailwind.

Note: if you already have custom css in your app.scss you don't have to delete it, the above is only true for fresh projects.

@tailwind components;
@tailwind utilities;

5. 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 test: /[\/|\\]app\.css$/.

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

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

Make sure you repeat this step for every css rule (4 by default)

6. Test if everything works!

Add some tailwind classes to your layout

<Label class="font-bold text-red-500" text="this text should be bold and red!" />

And run the app. If the label is bold and red - everything is working, happy tailwinding!

For a runnable example with CSS, see the Demo App

Purging unused CSS

Read more about purging on the Tailwind docs

To enable purging when building for production, NODE_ENV must be set to production

$ NODE_ENV=production tns build android --production ...
$ # or
$ NODE_ENV=production tns build ios --production ...