前言

又到周五了，是时候该放个大招了。哈哈~~

提到 CSS 想必每个做前端开发的没有不知道的，也没有不会用的。即使是后端开发人员也多少会一点，因为这是Web开发中最最基础的一个知识了。

但是在平时写 css的时候，很多人又觉得他没点技术含量而且还会占用大量的时间去编写代码。虽然现在出现了很多很香的框架如: bootstrap 。还有一些css预处理器如：sass、less、stylus 都是为了解决在平时开发中的一些问题，提高工作效率。

今天给大家介绍一款新的比较火的前端 CSS 框架： Tailwind CSS

官网

先把官网奉上：

https://www.tailwindcss.cn/

先来感受两个官网图片：

关于安装

Tailwindcss 有很多种安装方式，也可以和不同的框架进行集成，这里以 vue3(vite) 为例介绍。

1、创建一个vite 工程，具体用法参考 vite 官网

npx create-vite-app my-project
cd my-project
npm install

2、初始化 Tailwind CSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3、创建您的配置文件，(这里会同时生成tailwind.config.js 和 postcss.config.js 文件)

npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

4、引入 tailwindcss

创建一个 css文件，这里创建位置是： /src/index.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

5、引入创建好的 index.css在 main.js 或者 main.ts 中引入刚刚创建好的css文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

关于更多的安装细节请仔细阅读官网文档

https://www.tailwindcss.cn/docs/installation

强大的功能

看一个例子

要实现这样一个样式设计，用传统的方式css如下

  

    
  
  

    
ChitChat
    
You have a new message!
  

用 tailwindcss写法如下：

  

    
  
  

    
ChitChat
    
You have a new message!
  

可以看到代码量是少了很多很多。

tailwindcss的强大功能远不止如此，还有很多强大好用的功能如：

• 强大的响应式设计

• 元素的hover 、focus 和其它状态的元素

• 深色模式
• ……

tailwindcss的功能实在是太多，这里也只是简单介绍几个常用的功能而已，如果你对这个框架感兴趣请到官网仔细阅读用法。

写在最后

Vue-admin-work 系列的 P 版本。也应用到了 tailwindcss 框架。如果你对 vue-admin-work 框架感兴趣。请到评论区查看源码获取的方式。

欢迎大家评论点赞转发~~~ 感谢支持