前言
又到周五了，是时候该放个大招了。哈哈~~
提到 CSS 想必每个做前端开发的没有不知道的，也没有不会用的。即使是后端开发人员也多少会一点，因为这做Web开发中最最基础的一个知识了。
但是在平时写 css的时候，很多人又觉得他没点技术含量而且还会占用大量的时间去编写代码。虽然现在出现了很多很香的框架如: bootstrap 。还有一些css预处理器如：sass、less、stylus 都是为了解决在平时开发中一些问题，提高工作效率。
今天给大家介绍一款新的比较火的前端 CSS 框架：Tailwind CSS
官网
先把官网奉上：
先来感受两个官网图片：
关于安装
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如下
<div class="chat-notification"> <div class="chat-notification-logo-wrapper"> <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div class="chat-notification-content"> <h4 class="chat-notification-title">ChitChat</h4> <p class="chat-notification-message">You have a new message!</p> </div> </div> <style> .chat-notification { display: flex; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; } .chat-notification-content { margin-left: 1.5rem; padding-top: 0.25rem; } .chat-notification-title { color: #1a202c; font-size: 1.25rem; line-height: 1.25; } .chat-notification-message { color: #718096; font-size: 1rem; line-height: 1.5; } </style>
用 tailwindcss写法如下：
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
可以看到代码量是少了很多很多。
tailwindcss的强大功能远不止如此，还有很多强大好用的功能如：
- 强大的响应式设计
- 元素的hover 、focus 和其它状态的元素
- 深色模式
- ……
tailwindcss的功能实在是太多，这里也只是简单介绍几个常用的功能而已，如果你对这个框架感兴趣请到官网仔细阅读用法。
写在最后
Vue-admin-work 系列的 P 版本。也应用到了 tailwindcss 框架。如果你对 vue-admin-work P 框架感兴趣。请联系微信客服
欢迎大家评论点赞转发~~~ 感谢支持
