Tailwindcss的使用

Tailwindcss

一、什么是Tailwindcss

是个css框架，核心内置了很多预定义样式，不需要自定义class名，直接在 DOM 中写预置好的 class 名快速实现样式，如：

浏览器兼容性：
Tailwind CSS 3.x 不支持IE浏览器，支持最新稳定版本的 Chrome、Firefox、Edge 和 Safari ：
Chrome: 92+
Firefox: 91+
Edge: 92+
Safari: 15+
Opera: 78+
iOS Safari: 15+
Tailwind CSS 2.x 仅支持IE的11版本，具体浏览器支持如下：
Chrome: 84+
Firefox: 78+
Edge: 84+
Safari: 13.1+
Opera: 70+
iOS Safari: 14.5+
Internet Explorer：11

二、安装

1.无node：
https://www.tailwindcss.cn/docs/installation
https://tailwind.nodejs.cn/docs/installation
2.有node：
将 Tailwind CSS 作为 PostCSS 插件安装，

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init复制

会生成tailwind.config.js和postcss.config.js两个配置文件，

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}复制

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// 当以下被匹配到的文件内的类名变化时,会被匹配到,同时会在打包目录下新增类对应的样式
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}复制

再写一个index.css文件，在main.js中引入：

/* //引入内置样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;复制

配置完成就可以使用了

<template>
  <div class="bg-white dark:bg-black">
    <div class=" text-9xl text-center text-blue-600 sm:max-md:text-blue-600/10 md:max-lg:text-orange-900">tailwind</div>
    <div class=" bg-[#37e162] dark:bg-[#e2f652] w-100 h-28 border-r-4xl max-w-sm font-display">tailwind</div>
    <div class="bg-sky-500 hover:bg-sky-700 flex justify-center items-center w-28 h-28">悬浮</div>
  </div>
</template>复制

三、支持功能（基本介绍）

1. 支持悬浮、聚焦等伪类伪元素状态

//悬浮背景颜色
<button class="bg-sky-500 hover:bg-sky-700">
  Save changes
</button>复制

2.自定义配置

tailwind.config.js的theme下配置

/** @type {import('tailwindcss').Config} */
export default {
  //设置主题
  darkMode: 'selector',
  // 当以下被匹配到的文件内的类名变化时,会被匹配到,同时会在打包目录下新增类对应的样式
  content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
  //自定义样式
  theme: {
    //屏幕尺寸，响应式,类似媒体查询
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
      // sm: {'min': '640px', 'max': '767px'},
    },
    //自定义大小比例，如w-10
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      28: '100px'
    },
    //theme.extend下添加会保留原主题，添加新主题
    extend: {
    	//自定义大小比例，如w-10
	    spacing: {
	      100: '500px'
	    },
	  	//自定义颜色
	    colors: {
	      pink: '#ff49db',
	      orange: '#ff7849',
	      white: '#ffffff',
	      black: '#000000',
	      blue: {
	        100: '#f7fafc',
	        600: '#000',
	      }
	    },
	      fontFamily: {
	        display: 'Oswald, ui-serif' // Adds a new `font-display` class字体 
	      },
	      borderRadius: {
	        '4xl': '2rem'
	      },
	      maxWidth: {
	        'sm': '1000px'
	      },
	    screens: {
	      '3xl': '1920px'
	    }
    }
  },
  plugins: [],
}复制

3.媒体查询

默认有五个断点可以使用默认也可以自己添加，具体使用如下：

// 正常情况字体颜色是text-blue-600，屏幕在640px-768px之间，字体颜色是text-blue-600/10，768px-1024px之间是text-orange-900
<template>
  <div class="bg-white">
    <div class=" text-blue-600 sm:max-md:text-blue-600/10 md:max-lg:text-orange-900">tailwind</div>
  </div>
</template>复制

自定义配置：

export default {
  content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
  //自定义样式
  theme: {
    //屏幕尺寸，响应式,类似媒体查询，会覆盖默认的
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
      // sm: {'min': '640px', 'max': '767px'},
    },
    //theme.extend下添加会保留原主题，添加新主题
    extend: {
	    //屏幕尺寸，响应式,类似媒体查询
	    screens: {
	      '3xl': '1920px',
	    },
    }
  },
  plugins: [],
}复制

4.明暗主题切换

可以支持使用dark:{class}属性，快捷切换明暗主题：
首先在tailwind.config.js文件下配置darkMode：

//tailwind.config.js
export default {
  //设置主题
  darkMode: 'selector',
  ...
}复制

在代码中使用dark：

  //HelloWorld.vue
  <div class="bg-white dark:bg-black">
    <div class=" bg-[#37e162] dark:bg-[#e2f652]">tailwind</div>
  </div>复制

切换明暗主题：
在最外层如果设置class为dark,那么就会应用暗主题，不设置设置为空使用明主题

四、快捷工具

1.使用的时候需要多次查找文档，但是语义化比较强、上手难度不高，地址如下：
https://www.tailwindcss.cn/docs/installation
https://tailwind.nodejs.cn/docs/installation
2.vscode可以安装Tailwind CSS IntelliSense插件，会有提示