@nativescript/tailwind
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"
/>
Usage (with @nativescript/webpack version 5.x)
Install @nativescript/tailwind and tailwindcss
npm install --save @nativescript/tailwind tailwindcssChange your app.css or app.scss to include the tailwind utilities
@tailwind components;
@tailwind utilities;Start using tailwind.
Using TailwindCSS JIT (just in time)
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 initExample 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: [],
}Using a PostCSS config
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
tailwindcssor@nativescript/tailwind, you will need to disable autoloading:ns config set tailwind.autoload falseThis is required only if you make changes to either of the 2 plugins - because by default
postcss-loaderprocesses the config file first, and then thepostcssOptionspassed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Settingtailwind.autoloadtofalsejust disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.
Usage (with @nativescript/webpack version <5.x)
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.
See instructions
npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loaderCreate postcss.config.js with the following:
module.exports = {
plugins: [
require('tailwindcss'),
require('nativescript-tailwind')
]
}Change your app.css or app.scss to include the tailwind utilities
@tailwind components;
@tailwind utilities;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 rules: [.
For every css/scss block, append 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 append postcss-loader to all css/scss rules in the config.
Usage with the pre-built css
@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.
See instructions
Import the pre-built css file in your app.css (or scss):
@import "@nativescript/tailwind/dist/tailwind.css"Alternatively, import it in your main.js (or main.ts, app.js, app.ts etc.)
import '@nativescript/tailwind/dist/tailwind.css'In .vue files you can also do
<style src="@nativescript/tailwind/dist/tailwind.css" />Note: make sure you only include this once (for example in
App.vue) - otherwise your bundle will contain the whole tailwind.css file multiple times.
