@joshmossas/nativescript-tailwind v1.3.2

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.

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