为什么我的 Tailwind react native 没有改变任何东西?

我正在做一个项目,在项目中,我想使用tailwuind,我按照npms文档中所示的方式安装了它,我按照所示导入并使用它,它不会返回错误,但它不会做任何事情。

enter image description here enter image description here

enter image description here enter image description here

stack overflow Why is my Tailwind ract native not changing anything?
原文答案

答案:

作者头像

这是因为 tailwind-rn 只生成它真正需要的 CSS,并且每次向元素添加 tailwind 类时,都应该让 tailwindCSS 生成一个新的 style.css 文件(它会自动执行此操作)。

您的代码看起来不错,但您应该运行 tailwind 以及 react-script,只需编辑您的 package.json 文件并添加以下行:

"dev:tailwind": "concurrently "tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch" "tailwind-rn --watch" ",

然后,如果您使用纱线,只需输入:

yarn run dev:tailwind

或使用 npm

npm run dev:tailwind

请确保您已同时安装(npm i -g 同时)。

运行此程序后,像往常一样启动您的应用程序(在另一个终端/cmd 上),现在应该可以工作了。

作者头像

我只是按照文档上的说明进行操作。

安装库在终端上运行以下命令。

npm install tailwind-rn

或者

yarn add tailwind-rn

在此之后,我运行命令来设置库。

npx setup-tailwind-rn

在您的 tailwind.config.js 中,您必须在 content 上添加使用顺风的文件的路径。对我来说,我添加了文件夹 components 中的所有 .js 文件。

module.exports = {
  content: ['./components/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
}

上面的代码在文档中不存在。

在此之后,我运行一个命令来构建顺风:

yarn build:tailwind

或观察变化

yarn dev:tailwind

最后,您可以在 iOS 或 Android 上运行您的项目。

这对我有用。

expo-tailwind-example

您可以看到 source code project example on github

要查看它在您的设备上运行,只需按照上面的存储库说明进行操作。

作者头像

在顺风中,CSS 不断更改并在 output.css 文件中进行更改非常重要。为此,您可以在为您的react文件运行实时服务器时同时使用 -

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

或者只是遵循 TailwindCLI 的正确安装文档

作者头像

在应用程序的根目录中,我需要将其包装在 .如果有人对 Tailwind 有疑问,您可以转到 https://github.com/marcelofreires/expo-tailwind-example 并检查每个文件的设置方式,并找到他们错过的地方......