tailwindcss 基本介绍使用

介绍

tailwindcss是一种原子化css框架 他集成了写好的一些css样式 对于我们繁琐的创建类名和写样式 消耗了大量的时间 这时候tailwindcss提供给我们写好的一些样式直接在标签中写class 在class中写样式这样省去了我们创建类名和时间成本 下面开始操作

1、第一步在项目中引入tailwindcss首选需要下载包

官网链接

npm install -D tailwindcss
npx tailwindcss init

2、第二步

1、看根目录下是否已经集成了 tailwind.config.js 如果没有者创建

2、在文件中添加以下代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], 
// src下面的文件  .{html,js}这是哪些文件可以被应用例如 vue tsx jsx 
  theme: {
    extend: {},
  },
  plugins: [],
}

3、第三步

1、在src文件中创建css文件夹

2、在css文件夹中创建两个文件 名称自定义

例 ：css/input.css && css/index.css

3、在input.css文件中写入

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

4、第四步

打开终端执行 切记这个终端不能关，否者写的不能同步生效需要重启运行下面命令之后才能生效

npx tailwindcss -i ./src/css/input.css -o ./src/css/index.css --watch

运行完上面名义 index.css文件中会自动添加样式

5、第五步

在需要用的文件中引入 /css/index.css即可

简单实现以下盒子

import React from "react";
import "./css/index.css";
type Props = {};

const Appson = (props: Props) => {
  return (
    <div>
    	  {/* 集成好的样式可以去官网翻阅 */}
      <h1 className="text-5xl text-emerald-700">tailwindcss</h1>
    </div>
  );
};

export default Appson;