Tailwind Css的使用

1.Tailwind Css是什么

官网解释：Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

我的理解是利用Tailwind CSS 提供的特定的类名，它帮你来实现css

2.Tailwind Css的安装

npm install -D tailwindcss
npx tailwindcss init

3.Tailwind Css的配置

下载好之后项目里面就会有

在里面配置

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js,jsx,tsx}"],theme: {extend: {},},plugins: [],
}

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

4.Tailwind Css的引入

项目里面饮入Tailwind Css样式

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

在main.js全局引入对应的css文件

5 Tailwind Css的使用

<template><div id="app"><h1 class="text-3xl font-bold underline">Hello world!</h1><div class="w-96 bg-white shadow rounded">111</div><div class="grid grid-cols-10 gap-2"><div class="bg-sky-50 aspect-square"></div><div class="bg-sky-100 aspect-square"></div><div class="bg-sky-200 aspect-square"></div><div class="bg-sky-300 aspect-square"></div><div class="bg-sky-400 aspect-square"></div><div class="bg-sky-500 aspect-square"></div><div class="bg-sky-600 aspect-square"></div><div class="bg-sky-700 aspect-square"></div><div class="bg-sky-800 aspect-square"></div><div class="bg-sky-900 aspect-square"></div></div></div>
</template>

<script>
export default {name: 'App',components: {
}
}
</script>

<style></style>