在 React JS 项目中设置 Tailwind CSS-编程类技能-免费个人简历,免费PPT模板,免费Excle模板,免费网页模板分享-林夕设计家园

如果您还没有 react 应用程序，请创建一个：

npx create-react-app my-app

cd my-app

登录后复制

安装 tailwind css 运行以下命令安装 tailwind css 及其依赖项：

npm install -d tailwindcss postcss autoprefixer

登录后复制

然后初始化 tailwind css：

npx tailwindcss init

登录后复制

这将在您的项目中创建一个 tailwind.config.js 文件。

配置 tailwind 编辑 tailwind.config.js 文件以配置内容路径。将内容密钥替换为以下内容：

/** @type {import(tailwindcss).config} */

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}", // scan these files for tailwind classes

theme: {

extend: {},

plugins: [],

};

登录后复制

将 tailwind 指令添加到 css 在 src 文件夹中，找到或创建一个名为 index.css 的文件。添加以下 tailwind 指令：

@tailwind base;

@tailwind components;

@tailwind utilities;

登录后复制

在 react 中导入 css 确保 index.css 已导入到您的项目中。在 src/index.js 文件中，您应该具有：

import ./index.css;

登录后复制

启动开发服务器运行你的 react 应用程序来查看 tailwind css 的实际效果：

npm start

登录后复制

以上就是在 React JS 项目中设置 Tailwind CSS的详细内容，更多请关注php中文网其它相关文章！

知识&宝库