Tailwind

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

安装

npm install -D tailwindcss #安装
npx tailwindcss init #初始化
npm install @headlessui/vue @heroicons/vue #如果使用vue则可选安装
npm install @tailwindcss/forms #安装表单模块
npm install @tailwindcss/aspect-ratio #列表模块,更好兼容老浏览器
npm install @tailwindcss/typography #电商详情
vs code安装这个插件Tailwind CSS IntelliSense

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

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

编辑tailwind.config.js配置文件:
content: ["./*.html", "./src/**/*.{css,js}"], 编译根目录下的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生效

容器

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-* 间距

字体大小
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 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;">

分列

分4列，每列空隙4

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

溢出

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

truncate 防止文本换行且 溢出

隐藏显示

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

<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>