当前位置：首页 > news >正文

tailwindcss 前端 css 框架无需写css 快速构建页面

news 来源：原创 2025/5/24 0:43:10

版本：VUE3 + TS 框架 vite

文章中使用tailwindcss 版本： ^3.4.17

简介： Tailwind CSS 一个CSS 框架，提供组件化的样式，直接在HTML 中编写样式，无需额外自定义CSS ，快速！简洁！复用！不担心命名困扰！在使用中，会自动删除未使用样式，减轻项目体积。

官网：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

一、安装并使用

①安装 tailwindcss

npm install -D tailwindcss@3.4.17 postcss autoprefixer // 安装 Tailwind CSS 以及相关依赖，保证完整功能
或
yarn add -D tailwindcss@3.4.17 postcss autoprefixer

②创建 postcss.config.ts 和 tailwind.config.ts

在项目根目录即 src 文件夹同级目录，内容配置如下：

postcss.config.ts 配置如下

export default{
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
}

// 如果是 js 项目则只需要修改为 
module.exports ={
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
}

tailwind.config.ts

export default{
     content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: []
}

// 如果是 js 项目则只需要修改为 
module.exports ={
      content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: []
}

③加载 tailwind 指令

在项目的主 CSS 文件(全局css样式文件)中添加以下内容

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在你的 vite.config.ts 中完成以下配置

向css 的postcss的plugins 添加 tailwindcss 和 autoprefixer

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default defineConfig({
    ...
    css: {
    postcss: {
      plugins: [
        tailwindcss,   
        autoprefixer,
       
      ],
    },
    },


})

④开始使用

tailwindcss：官网 Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

进入官网查看样式写法

使用案例如下：

// 字体大小 16px 颜色 #000   悬浮颜色 red   内容居中  悬浮时鼠标为可点击状态
<div class="text-[16px] text-[#000] hover:text-[red]  text-center cursor-pointer">
   文字字体设置
</div>
// 宽 150px  高50px  背景颜色 #000 且透明0.4  
<div class="w-[150px] h-[50px] bg-[#000]/40"></div>

二、优点详解

①快速简洁

// 快速布局   透明颜色 圆角  hover 样式 文字超出优化
 <div class="p-[48px] bg-[#f9f9f9] flex items-center flex-wrap">
    <!-- flex 布局 -->
    <div class="w-[350px] h-[300px] p-[12px] flex justify-between items-center flex-wrap border-[1px]">
      <div v-for="i in 4" class="bg-[red] w-[120px] h-[120px]"></div>
    </div>

    <div class="w-[400px] h-[280px] bg-[#000]/10 ml-[12px]"></div>  
    <div class="w-[280px] h-[280px] bg-[#000]/10 ml-[12px] rounded-[100%]"></div>
    <div class="w-[280px] h-[280px] bg-[#000]/10 ml-[12px] rounded-[100%] hover:bg-[red]/10"></div>
    <div class="w-[200px] overflow-hidden whitespace-nowrap text-ellipsis  p-[12px]">
    文字超出优化文字超出优化文字超出优化文字超出优化</div>
  </div>

效果图：

②组件化复用

对于常用的 CSS 样式写了之后，后面之后复制粘贴 HTML 标签即可，无需在引入 style

例如遮罩层样式：


 <!-- 外部盒子 -->
    <div class="w-[350px] h-[350px]">
      <!-- 图片遮罩层 -->
      <div class="relative w-full h-full hover cursor-pointer">
        <img
          src="https://picsum.photos/200/300"
          class="w-full h-full object-cover"
        />
        <div
          class="w-full h-full absolute bg-[#000] top-0 opacity-0 hover:opacity-80 flex justify-center items-center"
        >
          <p class="text-[18px] text-[#409EFF] font-semibold">查看详情</p>
        </div>
      </div>
    </div>

效果如下：

样式定义完成之后，后面使用时，直接可进行复用

总结：使用 tailwindcss 可进行样式组件化，直接在HTML 中编写样式，无需额外自定义CSS 可以快速简洁的完成页面的样式构造，且不用考虑类名重复问题，支持过渡悬浮透明 flex 布局排版等样式排版功能，完善切强大，省去了传统 CSS 的选择器嵌套、样式覆盖、BEM 命名等繁琐的步骤，针对日常开发需求可减少大量编写css样式的时间，提高开发效率。