taro-tailwind

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

Usage

First, install the package into your project

npm install --save taro-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 taro-tailwind/dist/tailwind.css

This is the easiest and quickest way to try out Tailwind in Taro, 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="taro-tailwind/dist/tailwind.css" />

Or import it in a css file

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

Or import it in your main.js

import 'taro-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/taro-tailwind tailwind.config.js
# or
npx taro-tailwind tailwind.config.js

3. Use as a PostCSS plugin

If you're using PostCSS, you can install tailwind according to their official docs, and then include the taro-tailwind postcss plugin.

// postcss.config.js

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