Tailwind

文档：https://tailwind.nodejs.cn/brand

切换源
npm config set registry https://mirrors.cloud.tencent.com/npm/

3.x版本安装

npm install -D tailwindcss@3 #安装
npx tailwindcss init #初始化
npm install @headlessui/vue @heroicons/vue #如果使用vue则可选安装
npm install @tailwindcss/forms #安装表单模块
npm install @tailwindcss/aspect-ratio #列表模块,更好兼容老浏览器

新版安装

npm install tailwindcss @tailwindcss/vite
然后编辑vite.config.ts：

import { defineConfig } from 'vite'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
	  // 其它插件
	  tailwindcss(),
  ],
})

在css文件中使用@import "tailwindcss";
npm install @tailwindcss/typography #电商详情
vs code安装这个插件Tailwind CSS IntelliSense

html引入

 // 使用 Tailwind CSS CDN 进行快速样式展示，生产环境应使用构建后的 CSS
<script src="https://cdn.tailwindcss.com"></script>
// 构建时使用这个,假设tailwind生成的css在/static/main.css
<link href="/static/main.css" rel="stylesheet">

v3版使用方式：

在项目中创建src文件夹，并创建tailwind.css文件：

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

编辑tailwind.config.js配置文件:
content: ["./*.html", "./src/**/*.{css,js,vue}"], 编译根目录下的html和src下的所有css和js文件

构建：

npx tailwindcss -i ./src/tailwind.css -o ./src/tailwind.css

实时构建：

npx tailwindcss -i ./src/tailwind.css -o ./src/tailwind.css --watch

btcinfo

构建npx tailwindcss -i ./static/tailwind.css -o ./static/main.css --watch

vue

构建npx tailwindcss -i ./src/static/tailwind.css -o ./src/static/main.css --watch

adminvue

构建npx tailwindcss -i ./public/tailwind.css -o ./public/static/admin.css

优先考虑小屏，例如py-0 小屏不要留空，然后从小到大

None width: 100%;
sm (640px) max-width: 640px; 大于640 生效
md (768px) max-width: 768px; 大于768生效
lg (1024px) max-width: 1024px; 大于1024生效
xl (1280px) max-width: 1280px; 大于1280生效
2xl (1536px) max-width: 1536px; 大于1536生效
取反方法：max-[639px]:bg-red-500小于639生效

容器

mx-auto 自动居中 ，作用自身
flex 弹性收缩，单独一行
block 块级元素，会单独一行，不可与flex同时使用
flex-row 水平排列
flex-col 纵向排列
flex-wrap 自动换行
flex-nowrap 不换行

gap-4 调整flex子元素之间的间距
gap-x-8 单独调整横向间距
gap-y-4 单独调整纵向间距

搭配mx-auto居中，和限制它的最大尺寸，一般用于主内容展示
max-w-screen-sm max-width: 640px;
max-w-screen-md max-width: 768px;
max-w-screen-lg max-width: 1024px;
max-w-screen-xl max-width: 1280px;
max-w-screen-2xl max-width: 1536px;

边距

mt 外顶边距
mb 外底边距
mr 外右边距
ml 外左边距
mx 外左右边距
my 外上下边距

pt 内顶边距
pb 内底边距
pr 内右边距
pl 内左边距

space-x 元素之间横向间距
space-y 元素之间纵向间距

文字排版

text-left 左对齐 text-align: left;
text-center 居中text-align: center;
text-right 右对齐 text-align: right;
text-justify 两端对齐，中间会留空text-align: justify;

text-black 文字黑色
text-white 文字白色

leading-* 行高
tracking-* 间距
line-clamp-3 限制行数

字体大小
text-xs
text-base
text-lg
text-xl
text-2xl
text-3xl

分割线和标题分割线

<hr class="w-full border-t border-gray-300">

<div class="relative">
  <div class="absolute inset-0 flex items-center" aria-hidden="true">
    <div class="w-full border-t border-gray-300"></div>
  </div>
  <div class="relative flex justify-center">
    <span class="bg-white px-2 text-sm text-gray-500">Continue</span>
  </div>
</div>

居中

flex justify-center //横向居中，作用在它的子元素
flex items-center //横向居中对齐，作用在子元素，必须和flex一起
flex flex-col items-center 子元素居中，且各占一行

单行一行左右分开布局

justify-between 子元素分散排列
flex-initial自动收缩

<div class="flex justify-between">
  <div class="flex-initial">左侧内容</div>
  <div class="flex-initial">右侧内容</div>
</div>

换行和一行

inline-flex 在一行，作用在子元素
items-center 让一行横向居中对齐，作用在子元素
让文本换行
<span class="text-wrap" style="overflow-wrap: break-word;">

文本不换行

whitespace-nowrap

分列

分4列，每列空隙4

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

溢出

overflow-hidden overflow-ellipsis 会让溢出父容器部分显示省略号
overflow-hidden 隐藏溢出，但是可内部滑动
overflow-auto 溢出自动滑动
overflow-x-auto 溢出横向滚动

truncate 防止文本换行，超出显示省略号
text-clip 防止换行，并截断文本

隐藏显示

断点隐藏，小屏下隐藏，大屏显示

<div class="hidden sm:flex"> 在sm处断点
<div class="sm:block hidden"> 也可以这样，默认隐藏在大于sm屏幕时显示

手动黑暗模式

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
		//...
  theme: {
    extend: {},
  },
  plugins: [],
  darkMode: 'selector',
}

theme.js:

//读取主题，并添加样式，返回是否暗黑模式
function theme () {
    var theme1 = localStorage.getItem('theme'); //读取本地主题
    if (theme1 != 'dark') {
    document.documentElement.classList.remove('dark');
    return false;
    } else {
    document.documentElement.classList.add('dark');
    return true;
    }
}

index.html:

<script src="/static/PetiteVue.js"></script>
<script src="/static/theme.js"></script>
<script>

  PetiteVue.createApp({
    isDark: theme(), //当前状态
    openDark() {
      this.isDark = !this.isDark;
      if (this.isDark) {
        document.documentElement.classList.add('dark'); //向html添加dark样式
        localStorage.setItem('theme', 'dark');  //本地写入主题
      } else {
        document.documentElement.classList.remove('dark');  //删除dark样式
        localStorage.setItem('theme', 'light');
      }
    },
  }).mount();

</script>

鼠标指向元素悬浮提示

<span class="group relative">
	<span class="ml-1 inline-flex flex-shrink-0 items-center rounded-md bg-green-50 px-1 py-1 text-base font-medium text-green-700 ring-1 ring-inset ring-green-600/20">小易认证</span>
	<span class="mb-2 px-3 py-2 text-sm text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
	该消息经过小易官方认证
 </span>
</span>

图片显示

object-center 在元素内居中对齐
object-cover 会将图片填充满容器，如果图片比例和容器比例不一样会裁剪图片
object-contain 自动缩放适应容器

字符串显示原始的空白字符和换行

whitespace-pre-wrap