tailwindcss简单使用

官网：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

中文官网（不确定是不是官方的）：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

参考链接：vue 3 第三十五章：集成 tailwind Css_vue3 tailwindcss-CSDN博客

Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的, 对于PostCSS的插件使用，我们再使用的过程中一般都需要如下步骤：

1. PostCSS 配置文件 postcss.config.js，新增 tailwindcss 插件。
2. TaiWindCss插件需要一份配置文件，比如:tailwind.config.js。

1.安装TailWind以及其他依赖项

npm install -D tailwindcss postcss autoprefixer

2.创建配置文件tailwind.config.js

npx tailwindcss init

这将在项目根目录下创建一个名为tailwind.config.js的配置文件

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

3.创建一个名为postcss.config.js的配置文件

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4.引入样式文件

// /assets/main.css
@tailwind base; 
@tailwind components;
@tailwind utilities;

//main.js
import "./assets/main.css";

5.简单使用

<div class="w-screen h-screen bg-black border-slate-600 font-bold text-8xl text-stone-50 text-center">
    TailWind Css
</div>

效果：

6.vscode插件Tailwind CSS IntelliSense和volar

会出现智能提示：

7.个性化定制 如果在项目中想自定义自己习惯使用的类名，那么可以使用TailWind css的自定义配置功能，
更多配置：Configuration - TailwindCSS中文文档 | TailwindCSS中文网