tailwindcss 是趋势、逃不掉 - 第一章 基本用法

写在前面

我记得我之前写过一篇文章,说了这么一段话,我说使用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上是新手,所以上面的实现也是我一边看文档,一边实现的,很多写法不太规范,见谅,给大家提供一个思路而已。