自学内容网 自学内容网

Tailwind 安装使用

Tailwind 安装使用

前言

CSS原子化——本文将详细介绍如何在Vue + Vite + npm环境下安装、配置并使用Tailwind CSS!

在这里插入图片描述

一、Tailwind 在 Vue + Vite 项目中的安装

1. 创建Vue项目

如果您已经有了项目可以掠过这一步 ,从 2 开始

首先,确保你的机器上已安装Node.js和npm。然后,使用Vite创建一个新的Vue项目:

npm create vite@latest my-vue-app --template vue
cd my-vue-app

2. 安装Tailwind CSS

接下来,在项目根目录下安装Tailwind CSS及其依赖项:

npm install tailwindcss postcss autoprefixer

3. 初始化Tailwind配置

安装完成后,使用Tailwind的初始化命令生成配置文件:

npx tailwindcss init -p

这个命令将生成tailwind.config.jspostcss.config.js两个文件。tailwind.config.js用于自定义Tailwind的配置,而postcss.config.js则配置了PostCSS,这是Tailwind编译所必需的。

4. 修改文件 tailwind.config.js

配置 ·tailwind.config.js 文件 直接复制下面代码·

/***   tailwind.config.js  **/
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 修改 style.css

配置 ·style.css 文件 需要在style.css 文件中添加下面代码·

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

恭喜您,至此安装完成!!!!!

项目对应大至目录:
在这里插入图片描述

二、编译器配置

这里主要是针对 VScode 、Webstorm 等编译器插件安装
这里很有必要哦,会增加代码class 提示哈~~

webstorm 一定要注意版本,··注意:webstorm 2021 以下 ,的不予支持哦
直接上图:

在这里插入图片描述

直接插件市场安装即可!!

三、如何使用Tailwind(代码块示例)

现在,我们可以在Vue组件中使用Tailwind的类名来应用样式。以下是一个简单的Vue组件示例,展示了如何使用Tailwind构建一个基本的按钮:

<template>
  <div class="container mx-auto">
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

点这里—中文文档 哦!!
点这里—中文文档 哦!!
点这里—中文文档 哦!!
点这里—中文文档 哦!!

四、注意事项

  • 避免样式冲突:在Vue项目中,确保Tailwind的样式与其他CSS库或自定义样式不产生冲突。可以通过调整Tailwind的配置或使用@apply指令来定制样式。
  • 响应式设计:充分利用Tailwind的响应式设计工具,如sm:, md:, lg:, xl:等前缀,来创建适应不同屏幕尺寸的样式。
  • 性能优化:在生产环境中,确保启用了PurgeCSS来去除未使用的CSS,以减少文件大小和提高加载速度。你可以在tailwind.config.js文件中配置PurgeCSS。

五、优缺点

优点

  • 高度可定制:通过tailwind.config.js文件,你可以轻松定制Tailwind的样式、颜色方案和其他配置。
  • 开发效率高:原子化的类名使得样式的调整变得快速而简单,大大提高了开发效率。
  • 与Vue/Vite无缝集成:Tailwind与Vue/Vite的集成非常顺畅,无需额外的配置或插件。

缺点

  • 学习曲线:对于初学者来说,Tailwind长时间使用可能导致自己css基础不牢固,建议慎用!
  • HTML膨胀:过度使用Tailwind可能导致HTML代码变得冗长。因此,建议结合自定义CSS和Tailwind的类名来达到最佳效果。

六、总结

本文主要介绍了css 原子化的最常用框架,tailwind, 针对这个框架,大家看法褒贬不一,但是博主任务作为前端开发不管您是否使用,但是对于这种工程化的框架还是要了解一些,毕竟面试很多面试官会问到,希望大家最起码也要有个了解~

看到这里的小伙伴,欢迎点赞、评论,收藏!

如有前端相关疑问,博主会在第一时间解答,也同样欢迎添加博主好友,共同进步!!!


原文地址:https://blog.csdn.net/qq_34419312/article/details/143721690

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!