React使用TailwindCSS

React中使用TailwindCSS

下载及初始化

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

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

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