【Vue3】Vue3 中使用 Tailwind CSS

秀秀_heo

已于 2024-03-02 10:27:04 修改

阅读量572

点赞数 1

分类专栏： CSS Vue 及其周边生态文章标签： css 前端 javascript

于 2023-10-08 21:24:15 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/133690387

版权

Vue 及其周边生态同时被 2 个专栏收录

150 篇文章 2 订阅

订阅专栏

CSS

59 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue3项目中使用TailwindCSS，作者选择了PostCSS作为构建工具，并分享了tailwind.config.js的基本配置。

摘要由CSDN通过智能技术生成

直接参考 Tailwind CSS

安装提供了四种方式。因为我常用构建工具搭建项目，所以选择 Using PostCSS 。

我使用了tailwind3，其中 tailwind.config.js 的配置可以改为：

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

可以参考：Vue3 集成 Tailwind CSS

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

秀秀_heo

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 超详细引入 tailwindcss 及使用教程，安装配置 tailwindcss 框架到项目中的详细步骤流程教学（附带 VScode 编辑器智能提示语法插件 / 个性化配置方法）

王佳斌

09-07

5886

vue3 tailwindcss，vue3引入使用tailwindcss，vue3 vite项目引入tailwindcss详细教程，vue3 tailwindcss的使用教程，vue3 tailwindcss的使用，vue3如何引入tailwindcss，vue3引入tailwindcss报错怎么办，在vue3项目中使用tailwindcss框架插件，Vue3如何使用并设置Tailwind CSS，vue3 tailwindcss怎么在vscode中进行语法提示，vscode安装什么插件能提示tailwin

参与评论您还未登录，请先登录后发表或查看评论

vuefer:Vue3使用Tailwind CSS风格像Flutter

03-14

Vuefer只是一种使用Tailwind CSS编写Flutter风格的Vue3的方法 sdsfd 请注意：该项目已从vuefer重命名为独立名称：vuefer 请注意：该项目正在进行中，完全是实验性的！启动该项目的原因和动力是一个问题：Flutter＆Dart太棒了！ Vue3和Typescript也很棒！但... Flutter无法在Excel :(内使用，并且使用Web库的方式比较复杂。因此，如果我们以Flutter的方式编写Vue3 TS，因为它既简单又快速，该怎么办？目的：快速原型开发和快速MVP开发请注意：它根本不是Flutter ，甚至都不是Flutter，但是希望它将使用其样式的组件和方法编写。根本没有正确编写它，并且直到版本1才可以在生产中使用。它尚未与任何标准对齐，并且根本没有任何样式，并且看起来很糟：)，因为现在的主要重点是编写基

vue3使用tailwindcss

weixin_75042169的博客

09-26

373

Tailwind CSS 是一个现代且高度可定制的CSS框架，它以“原子化”设计理念为核心，通过提供一系列可重复使用的CSS类，帮助开发人员更快速地构建美观且响应式的用户界面1 使用脚手架创建好相关的vue3模板。

TailwindCss在vue3项目中的使用

qq_45913170的博客

11-23

1400

output.css，开启监听生效目录中所有出现的 class 类名的变化，并编译为 CSS。5.运行 tailwindcss CLI 工具，指定源文件 ./src/.css。3.在tailwind.config.js添加对vue文件的识别。和输出文件./src/style/）中添加以下内容，用。Tailwind功能。

Vue3配置Tailwind CSS

欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。

05-17

5639

实用类以相当小的单元准备，因此大多数样式都可以通过仅组合实用类来实现。Tailwind 有大量的实用类，并使用必要的类来进行样式设置，但担心如果加载所有实用类，构建大小会增加。有这么多的类，你可能会认为很难记住这些类，但正如你在上面看到的，text-red-50。Tailwind 的实用类名称是这样命名的，这样你就可以很容易地想象要应用的样式。可以通过在 Tailwind 的配置文件tailwind.config.js。在下面的示例中，根目录中的 index.html。和 tsx 的文件是构建优化的目标。

Vue3整合TailwindCss

2301_76788095的博客

06-18

1126

Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了一组原子级的样式类，使得开发者可以通过组合这些类来快速构建现代化的用户界面。与传统的 CSS 框架不同，Tailwind CSS 并不提供预定义的组件或样式，而是专注于提供一组原子类，以实现更高程度的灵活性和定制性。Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

vue3项目中使用Tailwind CSS

最新发布

朝夕奔梦

09-28

768

一旦配置好自定义主题后，你就可以在Vue组件中使用这些自定义的 Tailwind CSS类。，你应该能看到Vite项目运行成功，并且可以使用 Tailwind CSS。保存后，页面应该会显示带有 Tailwind 样式的文本。为了确保 Tailwind CSS 正常工作，可以在。7.检查 Tailwind CSS 是否正常工作。1.首先，在新的文件夹中初始化一个项目，使用。5.添加 Tailwind CSS 到项目中。/* 如果你需要在这里添加额外的样式 */4.配置 Tailwind CSS。

vue3-tailwindcss-primevue:带有TailwindCss和PrimeVue的Vue 3模板

04-04

Vue 3 TailwindCss + PrimeVue模板一个Vue 3应用程序模板，实现了 UI工具包，，Vue Router和Fontawesome。实例化确保Vue CLI和Vue CLI初始化已全局安装 npm i -g @vue/cli npm i -g @vue/cli-init 要从此模板...

在Vue中使用TailwindCSS变体的最优雅的方式-Vue.js开发

05-27

在Vue variantwind中使用TailwindCSS变体的最优雅方法在Vue中使用TailwindCSS变体的最优雅方法用作指令或绑定，同时支持Vue 2和3，还支持PurgeCSS。 CDN

vue-tailwind-webpack：基本vue 3项目，带有tailwindcss，可切换暗模式

02-26

欢迎使用tailwindcss访问Vue.js 3。在不使用Vuex的情况下使用全局存储。支持暗模式，带有开关图标。组合：webpack，babel，postcss，打字稿，eslint。项目设置 npm install 编译和热重装以进行开发 npm run ...

Simple-E-Commerce:简易电子商务Laravel 8 + Vue 3 + TailwindCSS

04-18

简单电子商务这是一个使用Laravel 8 + Vue 3 + TailwindCSS的简单电子商务系统在此电子商务系统中，我们只有一些简单且基本的功能和特性，它们是：- 产品清单按品牌和类别过滤添加到购物车登记登录操作说明 git clone npm安装作曲家安装创建一个数据库在config / database.php和.env文件中配置数据库凭据 PHP的工匠迁移 PHP的工匠键：生成导入Simple-E-Commerce / database / data / e-commerce.sql PHP工匠服务注册为用户以查看产品这是产品列表：想法与计划我正计划使用过滤器/管道来打折不同会员类型的折扣。这意味着每种会员类型都有不同的折扣率。在管道中，它将以适当的财务格式（例如）返回新的RM和折扣价。 RM 6,299.00 按类别和品牌过滤

学习Vue3 第三十四章（Vue3集成Tailwind CSS）

qq1195566313的博客

05-25

1万+

Tailwind CSS 是一个 CSS 框架它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类官网地址Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站。 1.安装初始化项目 npm init vue@latest

vue3使用 tailwind css

Qyzcxy的博客

10-17

928

5：不用写在html标签上的写法 , 这种写法可以解决ctrl+s自动格式化的问题。如果第一步报错的话，可以看看官网，没有报错的话，继续第二步。@apply警告问题：需要配置，可自行百度（不影响运行）3：在tailwind.config.js 里面加入。4：在main.ts里面引入。2：第二步生成配置文件。

Vue3 使用Tailwindcss指南（vite）

vfs494的博客

05-16

1376

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。也就是会减少css文件的创建，把对应的样式的类名都写到class上。2.然后在你的文件目录下建一个css文件例如input.css引入tailwindcss的功能模块。会生成一个在dist文件下的output.css文件。安装完后，创建你自己的 create your。3.在main.js文件下导入。

vue 3 第三十五章：集成 tailwind Css

to_the_Future的博客

06-10

4604

Tailwind CSS 是一个实用的 CSS 框架，旨在帮助开发人员快速构建现代网站和 Web 应用程序。它提供了一组可重用的 CSS 类，可用于几乎任何类型的 UI 组件和布局。与传统的 CSS 框架不同，Tailwind 不会预定义任何样式。相反，它将样式定义为独立的类，使开发人员可以按需使用它们。例如，要添加一个按钮，只需将适当的类添加到 HTML 元素上，而不必为每个按钮编写自定义 CSS。Tailwind 还提供了广泛的定制选项，以便根据需要调整样式。这包括设置颜色，间距和字体等属性。通过。

vue3 + Tailwind Css + Vite 搭建快速开发前端样式环境