安装

使用postcss把Tailwind作为插件安装

1.安装 Tailwind CSS

通过 npm安装tailwindcss及其对等依赖项，并创建您的文件。 tailwind.config.js

npm install -D tailwindcss postcss autoprefixernpx

2.将 Tailwind 添加到您的 PostCSS 配置中

以下命令会生成tailwind.config.js和postcss.config.js

npx tailwindcss init -p

3.配置模板路径`tailwind.config.js`

module.exports = {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

4.将 Tailwind css添加到css文件中，新建一个css文件

/* 引入tailwindcss样式库 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5.在main.js中导入，全局使用

import './assets/style.css';

6.构建后即可使用

npm run dev
<h1 class="text-3xl font-bold underline"> Hello world! </h1>

自定义配置

在tailwind.config.js中，可在theme中增加配置。

注意：

1.在extend内配置，意味着对官方默认支持配置做拓展。

例如：上图中增加了一个叫primary的颜色

2.在theme内，extend外增加配置，则是对官方配置做重写，官方默认配置便不生效，只支持当前在theme内的配置。

例如：当前在colors定义了一些颜色，那官方默认配置的颜色，例如rose则不会生效。

官方默认的配置文件地址：github.com/tailwindlab…

以上包含了theme中所有支持自定义配置的key，自定义配置或增加配置时可进行参考

使用

1.IDE安装官方插件（Tailwind CSS IntelliSense）

可提供类名提示、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验。

2.官方文档链接：tailwindcss.com/docs

3.注意项：

对于定义的colors、spacing，这两个配置是可以多项使用的

例如colors里增加了一个叫primary的颜色，这个颜色可以用于字体颜色也可以用于背景颜色，边框颜色等。

spacing里定义的123则是既可以用于padding也可以用于margin，

4.常用类名

布局

容器：container

<div class="container">
  <!-- ... -->
</div>

Flex

<div class="flex justify-center items-center">
  <!-- ... -->
</div>

Spacing

p-1：四周加“1”的padding，官方默认的1是0.25rem（4px）

px-1: x轴左右两边加“1”

py-1: y轴上下两边加“1”

margin缩写为m

<div class="p-1 pl-1 pr-1 pt-1 pb-1 px-1 py-1">
  <!-- ... -->
</div>

Text

text-sm: font-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px */

text-xl: font-size: 1.25rem; /* 20px / line-height: 1.75rem; / 28px */

font-medium: font-weight: 500;

text-white: color: rgb(255 255 255);可以是其他颜色

text-cnter: text-align:center;

<div class="text-sm text-center font-medium text-white">
  <!-- ... -->
</div>

Background

bg-white: background-color: rgb(255 255 255);

bg-bottom: background-position: bottom;

bg-auto: background-size: auto;

bg-none: background-image: none;;

<div class="bg-white bg-bottom bg-auto">
  <!-- ... -->
</div>

Border

rounded: border-radius: 0.25rem; /* 4px */;

rounded-lg: border-radius: 0.5rem; /* 8px */

border-white: border-color: rgb(255 255 255);

border：border-width：1px;

<div class="rounded">
  <!-- ... -->
</div>

vue项目中tailwind css如何配置的分享

安装