React使用TailwindCSS的实现示例

TailwindCSS是一个实用优先的 CSS 框架，包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在您的标记中组合以构建任何设计。

下载及初始化

可以查看官网对照自己使用的框架进行配置

npm install -D tailwindcss postcss autoprefixer

下载完毕后执行如下命令

npx tailwindcss init -p

可以发现项目中多了两个文件

其中默认已经进行了配置，我们需要将tailwind.config.js更改配置为如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在index.css（你的全局css文件）中添加如下：

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

此时发现有警告，只需要在设置中搜索unkown，然后将如下设置为ignore即可。如果你是用的是less或者scss，下滑可以找到选项。

基本使用

输入以下代码，看到效果如下

<h1 className="text-3xl font-bold underline">
	Hello world!
</h1>

但此时书写代码没有提示，体验很差，可以下载一个插件Tailwind CSS IntelliSense

下载完成后，书写代码，输入空格后发现出现提示

到此这篇关于React使用TailwindCSS的实现示例的文章就介绍到这了,更多相关React TailwindCSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！