插件
Tailwind CSS
@nativescript/tailwind
警告
⚠️ @nativescript/[email protected] 对于颜色正常工作是必需的。在较旧的核心版本上，您可能会看到错误的颜色，因为 Tailwind CSS v3 使用 RGB/A 颜色表示法，该表示法已在 8.2.0 中实现，而之前的版本不支持它。
使在 NativeScript 中使用 Tailwind CSS 变得更加容易！
<label
text="Tailwind CSS is awesome!"
class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full"
/>
用法
注意
本指南假设您正在使用 @nativescript/[email protected]，因为某些配置会自动完成。如果您尚未升级，请阅读下面的文档以了解与旧版 @nativescript/webpack 结合使用的信息。
安装 @nativescript/tailwind 和 tailwindcss
npm install --save @nativescript/tailwind tailwindcss使用以下命令生成 tailwind.config.js
npx tailwindcss init调整 content、darkMode、corePlugins 以及您需要的任何其他设置，以下是我们推荐的值
// 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
},
}更改您的 app.css 或 app.scss 以包含 tailwind 实用程序
@tailwind base;
@tailwind components;
@tailwind utilities;在您的应用中开始使用 tailwind。
使用自定义 PostCSS 配置
如果您需要自定义 postcss 配置，您可以创建一个 postcss.config.js（支持其他格式，请参阅 https://github.com/webpack-contrib/postcss-loader#config-files）文件并添加任何自定义项，例如
// postcss.config.js
module.exports = {
plugins: [
['tailwindcss', { config: './tailwind.config.custom.js' }],
'@nativescript/tailwind',
'@csstools/postcss-is-pseudo-class',
],
}注意
如果您想对 tailwindcss 或 @nativescript/tailwind 应用自定义，则需要禁用自动加载
ns config set tailwind.autoload false仅当您对这两个插件中的任何一个进行更改时才需要此操作 - 因为默认情况下，postcss-loader 首先处理配置文件，然后处理传递给它的 postcssOptions。启用自动加载后，由于加载顺序，任何自定义都将被覆盖。将 tailwind.autoload 设置为 false 只是禁用这些插件的内部加载，并要求您按上述顺序将它们手动添加到您的 postcss 配置中。
与旧版 @nativescript/webpack 结合使用
此用法被视为旧版，将不再支持 - 但是我们在此处记录它，以防您的项目仍在使用旧版 @nativescript/webpack。
查看说明
npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader创建包含以下内容的 postcss.config.js
module.exports = {
plugins: [require('tailwindcss'), require('nativescript-tailwind')],
}使用以下命令生成 tailwind.config.js
npx tailwindcss init调整 content、darkMode、corePlugins 以及您需要的任何其他设置，以下是我们推荐的值
// 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
},
}更改您的 app.css 或 app.scss 以包含 tailwind 实用程序
@tailwind base;
@tailwind components;
@tailwind utilities;更新 webpack.config.js 以使用 PostCSS
找到定义不同文件类型规则/加载器的配置部分。要快速找到此块 - 搜索 rules: [。
对于每个 css/scss 块，将 postcss-loader 附加到加载器列表中，例如
{
test: /[\/|\\]app\.css$/,
use: [
'nativescript-dev-webpack/style-hot-loader',
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
},
+ 'postcss-loader',
],
}确保将 postcss-loader 附加到配置中的所有 css/scss 规则。
