Tailwind CSS

工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名，然后生成相应的样式代码并写入到一个静态CSS文件中。简而言之就是将所有CSS类名转换为对应的CSS样式。不需要另外写CSS文件，只需要在HTML文件中使用Tailwind提供的类名即可。

安装

npm install -D tailwindcss 
npx tailwindcss init

配置

在项目根目录下创建一个名为tailwind.config.js的文件，并添加以下代码：

module.exports = {
// 
  content:["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  }
}

将加载Tailwind的指令添加到你的CSS文件中

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

使用

在HTML文件中使用Tailwind提供的类名即可。例如，要设置一个按钮的样式，可以在HTML文件中添加一个按钮元素，并添加一个类名来设置按钮的样式。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>

Tailwind与CSS伪类、伪元素写法不一样


    .bg-blue-500:hover {
        background-color: blue;
    }

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>

CSS的冒号写在类名后面，而Tailwind的冒号写在类名前面。

Tailwind基于父状态的样式

父元素的类名加上group，子元素的类名加上group-*,例如group-hover，即可实现父元素状态改变时，子元素状态也跟着改变。

<div class="bg-blue-500 group">
  <button class="bg-blue-700 group-hover:bg-blue-500">按钮</button>
</div>

基于同级状态的样式

类名加上peer-*，使用和上面的差不多

基于兄弟状态的样式

类名加上sibling-*，使用和上面的差不多

基于自身状态的样式

类名加上self-*，使用和上面的差不多

设置直接子元素的样式

使用修饰符*

<div>
  <h2>Categories<h2>
  <ul class="*:border-sky-100">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
  </ul>
</div>

注意点：子元素不能直接覆盖。

Tailwind可以设置占位符文本样式

placeholder

 <input class="placeholder:text-slate-400 placeholder="Search for anything..." type="text" name="search"/>

文本输入按钮

file

列表标记

marker

突出显示的文本

selection

定制

在tailwind.config.js文件中添加以下代码：

module.exports = {
  theme: {
    extend: {
        // 添加自定义颜色，也可以添加自定义字体等
      colors: {
        'primary': '#007bff',
        'secondary': '#6c757d',
        'success': '#28a745',
        'info': '#17a2b8',
      }
    }
  }
}

一些语法

盒子样式

Class	Properties
box-border	box-sizing:border
box-content	box-sizing:content

display

直接将display的属性值写入html的类名里，唯一不同的是display:none要写成hidden

float

Class	Properties
float-start	float:inline-start
float-end	float:inline-end
float-right	float:right
float-left	float:left
float-none	float:none

overflow

类名格式属性名-属性值，比如overflow-hidden类比于overflow:hidden

position

直接在类名里写入position的属性值。

Class	Properties
static	position:static
relative	position:relative
absolute	position:absolute
等

visibility

Class	Properties
visible	visibility:visible
invisible	visibility:hidden
collapse	visibility:collapse

z-index

类名格式z-数字,比如z-10类比于z-index:10

flexbox&grid

flex-basis

类名格式 basis-数值,比如basis-1类比于flex-basis:0.25rem

flex-grow

类名格式 grow-数值,比如grow-1类比于flex-grow:1

flex-shrink

类名格式 shrink-数值,比如shrink-1类比于flex-shrink:1

flex-wrap

类名格式flex-属性值，比如flex-wrap类比于flex-wrap:wrap

flex-direction

类名格式flex-属性值，比如flex-row类比于flex-direction:row

grid-template-columns

类名格式grid-cols-数值,比如grid-cols-1类比于grid-template-columns:repeat(1,minmax(0,1fr))

grid-template-rows

类名格式grid-rows-数值,比如grid-rows-1类比于grid-template-rows:repeat(1,minmax(0,1fr))

grid-columns

类名格式col-属性值，比如col-span-1类比于grid-column:span 1 / span 1

grid-rows

类名格式row-属性值，比如row-span-1类比于grid-row:span 1 / span 1

justify-content

类名格式justify-属性值最后一个单词，比如justify-between类比于justify-content:space-between

justify-items

类名格式justify-item-属性值，比如justify-items-center类比于justify-items:center

align-items

类名格式item-属性值，比如items-center类比于align-items:center

align-content

类名格式content-属性值，比如content-center类比于align-content:center

间隔

padding

p-0 padding:0px
在x轴上的padding px-0 padding-left:0px;padding-right:0px 在y轴上的padding py-0 padding-top:0px;padding-bottom:0px
pb-0 padding-bottom:0px
pl-0 padding-left:0px
pr-0 padding-right:0px
pt-0 padding-top:0px

发现Tailwind的数值都是使用rem作为单位

margin

和padding差不多

尺寸

width&height

类名格式w-数值，比如w-1类比于width:0.25rem

类名格式h-数值，比如h-1类比于height:0.25rem

可以使用类名size同时设置width和height

类名格式size-数值，

排版

font-size

类名格式text-尺寸，比如text-xs类比于font-size:0.25rem；line-hight:1rem。
尺寸有xs、sm、base、lg和xl。

font-weight

类名格式font-尺寸，比如font-bold类比于font-weight:700。
尺寸有light、normal、medium、semibold、bold、extrabold和black。font-weight的数值也随之加一百

text-align

类名格式text-属性值，比如text-center类比于text-align:center。

text-transform

直接将属性值写入类名中。
注意的是：text-transform:none 写为normal-case

text-decoration-line

直接将属性值写入类名中。

背景

类名格式直接是bg-属性值。
1. background-attachment。
2. background-color。
3. background-position。
4. background-repeat。
5. background-size。
类名格式是bg-属性名猴嘴-属性值。
1. background-chip。
2. background-origin。

边框

border-radius

类名格式rounded-尺寸，比如rounded-sm类比于border-radius:0.125rem。
尺寸有none、sm、md、lg和xl等。

border-width

类名格式border-数值，比如border-2类比于border-width:2px。

border-color

类名格式border-颜色。

border-style

类名格式border-属性值。

阴影

box-shadow

类名格式shadow-尺寸，比如shadow-sm类比于box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)。

opacity

类名格式opacity-数值，比如opacity-50类比于opacity:0.5。

blur

类名格式blur-尺寸，比如blur-sm类比于filter:blur(4px)。

Tailwind CSS学习