Tailwind Css的使用

news2024/11/17 8:18:59

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>