twindcss基本使用

先用vite搭建一个基础项目yarn create vite twindcss-test
安装twindcss yarn add tailwindcss postcss autoprefixer -D

//Vue2中使用
  1.最新的`tailwindcss`使用`postcss`8版本，`vue2`不支持，所以需要指定安装`postcss7`的版本
  yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  2.生成配置文件
  npx tailwindcss init # 空的
  npx tailwindcss init -fill # 包含默认的
  3.main.js引入
  import "tailwindcss/tailwind.css"

初始化配置文件npx tailwindcss init -p
在twindcss.config.js中添加配置

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5.将twindcss的指令添加到css中

css

//style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

6.开始使用

html

<template>
  <div class="text-center bg-cyan-50 text-cyan-800 text-3xl h-screen ">
    hello world
  </div>
</template>

7.伪类,伪元素,属性选择使用

html

//hover
<div class=" bg-cyan-50 hover:bg-cyan-100"></div>
//focus
<input type="text" class="focus:bg-pink-50">
//placeholder
<input type="text" class="placeholder:text-red-400" placeholder="请输入">
//disabled
<input type="text" class="disabled:bg-slate-300" disabled>
//after,before
<div class=" after:content-['1111111']"></div>
//自定义属性选择
<div data-aa="aa" class="data-[aa=aa]:bg-red-400"></div>
//子元素选择
<div class="[&_p]:bg-pink-400">
  <div>1</div>
  <div>2</div>
  <p>3</p>
</div>

更多请查看文档链接 8.断点

html

//twindcss默认是从小到大断点排序,什么都不写就是最小断点
//sm-640px,md-768px,lg-1024px,xl-1280px,2xl-1536px(宽度可通过配置文件自定义)
//基本使用
<div class="bg-red-50 sm:bg-pink-200 lg:bg-pink-300 xl:bg-red-300 2xl:bg-red-400">
</div>

9.暗黑模式

//在twindcss.config.css中添加
module.exports = {
  darkMode: 'class',
  // ...
}
<div class="bg-red-50 dark:bg-red-900">
</div>
//给根元素添加class='dark'可开启暗黑模式

10.在css文件中使用twindcss 使用@apply指令添加类名

css

.btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }

11.自定义组件

css

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
  .btn-error {
    @apply py-2 px-4 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

html

//使用
<div class="btn-primary"></div>
<div class="btn-error"></div>

12.自定义配置 twind.config.js

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

13.直接复制值

html

//twindcss提供theme()函数,可直接拿到tailwind.config.js中配置的theme的值
<div class="bg-[theme(colors.blue.200)]" ></div>
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"></div>
//使用,指定css变量
<div class="bg-[--color] [--color:pink]"></div>
//css语法空格用下横线代替
<div class="grid grid-cols-[1fr_500px_2fr] bg-[url('/what_a_rush.png')]"></div>
//文字需要指定属性
<div class="text-[length:var(--my-var)]">...</div>
<div class="text-[color:var(--my-var)]">...</div>

14.在css中使用嵌套语法

//postcss.config.js
export default {
  plugins: {
    "tailwindcss/nesting": {},//添加这个插件
    tailwindcss: {},
    autoprefixer: {},
  },
};

注意preflight 是TailwindCSS内置的一套全局样式

preflight主要修改的全局样式情况：

为所有元素设置box-sizing为 border-box
为所有元素设置了一个宽度为0，风格为 solid 的边框（这里有坑，后面会提到）
去掉body/h1/h2/h3/h4/h5/h6/p等标签的 margin
设置h1/h2/h3/h4/h5/h6的字体大小为网页默认字体
去掉a标签的颜色和下划线
去掉按钮的背景色
去掉ol/ul的列表风格
设置textarea只能纵向伸缩
重设input/textarea的placholder颜色
img/video/audio/svg/canvas/iframe等标签被设置为块级盒子
设置图片、视频的最大宽度为100%，以防溢出父级视区内如果不想使用可在twind.config.js中禁用

/** @type {import('tailwindcss').Config} */
  module.exports = {
    corePlugins: {
      preflight: false
    },
  }

css

//禁用之后需要在全局加上 不然边框不会出现
*, *:before, *:after {
  border-width: 0;
    border-style: solid;
  }

twindcss基本使用 ​

twindcss基本使用