nativescript-tailwind v2.0.1
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 ...