Warning:
⚠️ @nativescript/[email protected]is required for colors to work properly You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0 and prior versions don't support it.
Makes using Tailwind CSS in NativeScript a whole lot easier!
<label
text="Tailwind CSS is awesome!"
class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full"
/>
Note: This guide assumes you are using
@nativescript/[email protected]as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older@nativescript/webpackversions.
Install @nativescript/tailwind and tailwindcss
npm install --save @nativescript/tailwind tailwindcss
Generate a tailwind.config.js with
npx tailwindcss init
Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
],
// use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
darkMode: ['class', '.ns-dark'],
theme: {
extend: {},
},
plugins: [
/**
* A simple inline plugin that adds the ios: and android: variants
*
* Example usage:
*
* <Label class="android:text-red-500 ios:text-blue-500" />
*
*/
plugin(function ({ addVariant }) {
addVariant('android', '.ns-android &');
addVariant('ios', '.ns-ios &');
}),
],
corePlugins: {
preflight: false // disables browser-specific resets
}
}Change your app.css or app.scss to include the tailwind utilities
@tailwind base;
@tailwind components;
@tailwind utilities;Start using tailwind in your app.
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",
"@csstools/postcss-is-pseudo-class"
],
};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.
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-loader
Create postcss.config.js with the following:
module.exports = {
plugins: [
require('tailwindcss'),
require('nativescript-tailwind')
]
}Generate a tailwind.config.js with
npx tailwindcss init
Adjust content, darkMode, corePlugins plus any other settings you need, here are the values we recommend:
// tailwind.config.js
module.exports = {
content: [
'./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
],
// use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false // disables browser-specific resets
}
}Change your app.css or app.scss to include the tailwind utilities
@tailwind base;
@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.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent