@nativescript/tailwind

警告: :warning: @nativescript/[email protected] 是颜色正常工作的必需项。您可能在较旧的 core 版本中看到错误颜色，因为 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

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

npx tailwindcss init

// 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
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

{
  test: /[\/|\\]app\.css$/,
  use: [
    'nativescript-dev-webpack/style-hot-loader',
    {
      loader: "nativescript-dev-webpack/css2json-loader",
      options: { useForImports: true }
    },
+   'postcss-loader',
  ],
}