写在前面
我记得我之前写过一篇文章,说了这么一段话,我说使用less或者scss习惯了之后,可能就不会喜欢使用原生css的写法,我这里的原生写法指的是结构,因为即使你用less或者scss这种预编译代码的形式代码本身还是那一套基础样式,本质是没有变化的,但是如果是2023年之前,可能less还是css的主流样式解决方案,但是23年之后,基本上就不是了,后续出来的cssinjs,tailwindcss这种原子样式的解决方案,
什么是原子样式
这个概念其实很好解释,我们写代码的时候也有一个原则,就是原子性,说的直白一点就是这个操作在执行过程中不会被其他因素中断。无论系统中是否存在并发执行的情况,这个操作要么完整地执行完毕,要么就完全不执行,绝对不会出现只执行到一半的中间状态,他是一个完整体。有了这个概念,再理解原子性样式,可以理解为每个样式只进行处理一个特定的视觉属性,编程中的原子性可以理解为操作不可分割了,tailwindcss原子性可以理解为样式不可分割了,那么他和复合性样式有什么区别呢?举个简单的例子:
css
.demo {
color:"#f40";
font-size: 18px;
padding: 10px;
}
上面的这个demo就是复合属性,他代表的是颜色是淘宝红,字体大小是18px,内边距是10px
如果是原子性怎么实现呢?
css
<div class="text-[#f40] text-lg p-[10px]">
innerHtml
</div>
这里每一个属性都是特定的视觉效果,他不收到任何影响,可以在任意位置使用
tailwindcss的优势
- 样式一致性
- 快速迭代
- 可以按需生成样式
学习tailwindcss的难点
- 需要记大量的预设样式
- html变得非常冗长,维护起来并没有优势
基本用法 (只有tailwindcss4.0以上的版本可以按照下面的方式配置)
安装
- 创建一个基本的项目
js
pnpm create vite project-name --template=vue
- 配置package.json
json
{
"name": "vue-js",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.17",
"tailwindcss": "4.1.8" // 添加这里
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.0",
"vite": "^7.0.0",
"@tailwindcss/vite": "^4.1.8" // 添加这里
}
}
js
pnpm install
配置
- style.css
css
@import "tailwindcss";
- vite.config.js
js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // 添加这行
export default defineConfig({
plugins: [vue(),tailwindcss()], // 这里配置插件
server: {
port: 3000,
},
})
使用
- 直接使用即可
html
<!-- 基础样式测试 -->
<div class="flex justify-center items-center h-screen">
<button
class="text-white px-4 py-2 bg-amber-700 rounded-4xl hover:bg-amber-600 text-sm cursor-pointer transition delay-150 ease-in-out duration-300 hover:scale-110"
>
一个精致的按钮
</button>
</div>
实现相同页面效果不同代码实现方式直观比较一下
容器代码
html
<script setup>
import UseBaseStyle from "./components/UseBaseStyle.vue";
import UseTailWindcss from "./components/UseTailWindcss.vue";
</script>
<template>
<div class="flex flex-row justify-center">tailwindcss实现效果</div>
<!-- tailwindcss实现 -->
<UseTailWindcss />
<div class="flex flex-row justify-center">基础css实现效果</div>
<!-- 基本css实现 -->
<UseBaseStyle />
<!-- 基础样式测试 -->
<div class="flex justify-center items-center h-screen">
<button
class="text-white px-4 py-2 bg-amber-700 rounded-4xl hover:bg-amber-600 text-sm cursor-pointer transition delay-150 ease-in-out duration-300 hover:scale-110"
>
一个精致的按钮
</button>
</div>
</template>
<style scoped></style>
基础css代码实现
html
<script setup></script>
<template>
<div class="container">
<div class="con-input">
<input type="text" placeholder="请输入内容" />
</div>
<div class="con-img">
<img src="../assets//images/xcxzxesShare.png" alt="" />
</div>
<div class="con-product">
<div class="product-item" v-for="i in 5" :key="i">
<div class="item-top">
<div class="top-l">产品名称{{ i }}</div>
<div class="top-r">收藏</div>
</div>
<div class="item-mid">这里是产品基本介绍</div>
<div class="item-bot">
<div class="bot-l">¥ 50</div>
<div class="bot-r">
<button>立即购买</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
background-color: #f40;
color: #1c3861;
}
.con-input input {
width: 100%;
height: 40px;
border: 1px solid #fff;
border-radius: 10px;
padding-left: 20px;
color: #fff;
}
.con-img {
width: 100%;
margin-top: 10px;
}
.con-img img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.con-product {
margin-top: 10px;
}
.product-item {
background-color: #fff;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.item-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.item-bot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.item-mid {
font-size: 14px;
color: #666;
}
.top-l {
font-size: 18px;
}
.bot-l {
font-size: 18px;
color: #f40;
font-weight: bold;
}
.bot-r button{
background-color: #f40;
border-radius: 10px;
padding: 5px 10px;
color: #fff;
}
</style>
基础css实现效果

tailwindcss 代码实现
html
<script setup></script>
<template>
<div class="flex flex-col justify-center p-[10px] bg-[#f40] text-[#1c3861]">
<div>
<input
class="h-[40px] w-[100%] text-white pl-[20px] border rounded-[10px]"
type="text"
placeholder="请输入内容"
/>
</div>
<div class="w-[100%] mt-[10px]">
<img
class="w-[100%] h-[100%] rounded-[10px]"
src="../assets//images/xcxzxesShare.png"
alt=""
/>
</div>
<div class="mt-[10px]">
<div
class="bg-white mt-[10px] rounded-[10px] p-[10px]"
v-for="i in 5"
:key="i"
>
<div class="flex flex-row justify-between">
<div class="text-lg">产品名称{{ i }}</div>
<div class="top-r">收藏</div>
</div>
<div class="text-sm text-[#666]">这里是产品基本介绍</div>
<div class="flex flex-row justify-between mt-[10px]">
<div class="text-[#f40] text-lg font-bold">¥ 50</div>
<div class="bot-r">
<button
class="text-white bg-[#f40] px-[10px] py-[5px] rounded-[10px]"
>
立即购买
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped></style>
tailwindcss 实现效果

写在最后
我本来是不想研究这个东西的,但是没办法,现在很多开发包括ai涉及到的开发都是用的这种解决方案,如果不用的话,后续肯定是跟不上节奏了,所以这里我也劝一下大家,不要排斥,新型的技术出来肯定是有一定的道理的,新的样式解决方案,自己用了之后,才可以知道好处,我也是之前简单的了解,但是因为我的项目基本也很少用大量的样式处理,没在意,现在看来,这个还是很有学习的必要的,因为我在tailwindcss上是新手,所以上面的实现也是我一边看文档,一边实现的,很多写法不太规范,见谅,给大家提供一个思路而已。