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

写在前面

我记得我之前写过一篇文章，说了这么一段话，我说使用less或者scss习惯了之后，可能就不会喜欢使用原生css的写法，我这里的原生写法指的是结构，因为即使你用less或者scss这种预编译代码的形式代码本身还是那一套基础样式，本质是没有变化的，但是如果是2023年之前，可能less还是css的主流样式解决方案，但是23年之后，基本上就不是了，后续出来的cssinjs，tailwindcss这种原子样式的解决方案，

什么是原子样式

这个概念其实很好解释，我们写代码的时候也有一个原则，就是原子性，说的直白一点就是这个操作在执行过程中不会被其他因素中断。无论系统中是否存在并发执行的情况，这个操作要么完整地执行完毕，要么就完全不执行，绝对不会出现只执行到一半的中间状态，他是一个完整体。有了这个概念，再理解原子性样式，可以理解为每个样式只进行处理一个特定的视觉属性，编程中的原子性可以理解为操作不可分割了，tailwindcss原子性可以理解为样式不可分割了，那么他和复合性样式有什么区别呢？举个简单的例子：

.demo {
	color:"#f40";
	font-size: 18px;
	padding: 10px;
}

上面的这个demo就是复合属性，他代表的是颜色是淘宝红，字体大小是18px，内边距是10px

如果是原子性怎么实现呢？

<div class="text-[#f40] text-lg p-[10px]">
  innerHtml
</div>

这里每一个属性都是特定的视觉效果，他不收到任何影响，可以在任意位置使用

tailwindcss的优势

• 样式一致性
• 快速迭代
• 可以按需生成样式

学习tailwindcss的难点

• 需要记大量的预设样式
• html变得非常冗长，维护起来并没有优势

基本用法 （只有tailwindcss4.0以上的版本可以按照下面的方式配置）

安装

• 创建一个基本的项目

pnpm create vite project-name --template=vue

• 配置package.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" // 添加这里
  }
}

pnpm install

配置

• style.css

@import "tailwindcss";

• vite.config.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,
  },
})

使用

• 直接使用即可

<!-- 基础样式测试 -->
  <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>

实现相同页面效果不同代码实现方式直观比较一下

容器代码

<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代码实现

<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 代码实现

<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上是新手，所以上面的实现也是我一边看文档，一边实现的，很多写法不太规范，见谅，给大家提供一个思路而已。