vue3 集成 tailwindcss

tailwindcss 介绍

Tailwind CSS 是一个流行的前端框架,用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类,这些类可以直接应用到 HTML 元素上,从而加速开发过程并提高样式一致性。

主要特点如下:

  1. 原子级别的 CSS 类: Tailwind CSS 的核心思想是将样式拆分为原子级别的类,每个类都代表一个特定的样式属性,例如 text-center 用于文本居中对齐,bg-blue-500 用于设置背景颜色为蓝色。通过将这些类应用于 HTML 元素,可以构建精确的样式。
  2. 可配置: Tailwind CSS 允许你在配置文件中自定义样式属性,以满足项目的需求。你可以定义颜色、字体、间距、边框等等,以及响应式断点,使样式能够根据屏幕大小适应。
  3. 响应式设计: Tailwind CSS 支持响应式设计,你可以根据不同的屏幕宽度应用不同的样式类。例如,你可以使用 md:text-lg 类来指定在中等屏幕尺寸上使用较大的文本字号。
  4. 插件系统: Tailwind CSS 具有丰富的插件生态系统,你可以轻松地扩展框架的功能,以满足项目的特定需求。这些插件可以用于添加自定义样式、工具类或组件。
  5. 构建工具集成: Tailwind CSS 可以与构建工具(如Webpack、Parcel、PostCSS)无缝集成,使你能够自动化构建过程并优化生产代码。
  6. 社区支持: Tailwind CSS 拥有庞大的社区,因此你可以轻松找到教程、文档、示例和第三方插件,以帮助你更快地上手和开发。

Tailwind CSS 通过提供可复用的原子级别的 CSS 类,简化了前端开发的样式管理,使开发人员能够更高效地构建现代、响应式的用户界面。它适用于各种项目,从小型网站到大型 Web 应用程序,因为它提供了高度的灵活性和可定制性。

安装 tailwindcss

npm install -D tailwindcss postcss autoprefixer

安装完成后,在根目录执行初始化命令:

npx tailwindcss init -p 
// -p 代表配置

执行完成后,可以看到如下目录:

有如上两个文件生成,代码成功

配置 tailwindcss
tailwind.config.js

原本 2.0 的 purge 在 3.0 改成 content

/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}',],theme: {extend: {},},plugins: [],
}
style.css

将原本在 src/style.css 里面内容清空,然后放入如下的 TailwindCSS 的核心内容,这样可以避免再新建一个 index.css 在 main.ts 中引入,因为 style.css 默认会引入到 main.ts 中

@tailwind base;
@tailwind components;
@tailwind utilities;
测试使用效果

随便找一个 tsx 或 vue 的 模板文件,这里以 tsx 为例子:

import {defineComponent} from "vue";
import Button from '@opentiny/vue-button'
const HelloWorld = defineComponent({
name: 'HelloWorld',setup() {},render() {return (<div ><div class="text-center bg-gray-100 p-5"><p class="text-6xl  text-red-700">Hello!</p><h1 class="text-4xl text-green-500">Vite + TailwindCSS</h1></div></div>)}})export default HelloWorld

然后执行 npm run dev ,看效果,就成功了

配置IDEA中自动提示

如果 idea 不提示 tailwindcss 的标签,那么可以尝试将安装postcss的版本降低到2.1.4npm i @tailwindcss/postcss7-compat@2.1.4 --save
npm i tailwindcss@latest --save 

此外,插件市场记得安装下面的三个插件,这样提示效果会更加全面:

参考:https://intellij-support.jetbrains.com/hc/en-us/community/posts/4403640816274-Vue-Tailwind-no-autosuggestions-in-WebStorm-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/98892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正确使用 Unicode 和 MBCS 字符集

正确使用 Unicode 和 MBCS 字符集 在 Windows 下做开发&#xff0c;初学者经常面临字符集选择的问题。本文详细解释 MBCS 字符集和 Unicode 字符集的正确使用方法&#xff0c;以及为什么写程序要用 Unicode 字符集。同时对 UTF-8 做了简单介绍。 在程序中正确使用字符集 以 …

无图形化界面使用wireshark抓包分析数据

1. 解决Wireshark的权限不足问题 当普通用户身份运行Wireshark时&#xff0c;会遇到权限不足的问题。原因在于dumpcap需要root权限才能正常工作。以下是解决此问题的步骤&#xff1a; 创建用户组 我们将创建一个名为wireshark的用户组&#xff1a; sudo groupadd wireshark 更…

leetcode 70.爬楼梯、322.零钱兑换、279.完全平方数

70. 爬楼梯(进阶版) 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个或m个(m<n)台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. …

大语言模型学到什么

背景&#xff1a; 这篇文章是对《LANGUAGE MODELS REPRESENT SPACE AND TIME》论文的翻译加解读。之所以选这篇文章是因为最近在研究大模型的可解释性&#xff0c;以及基于可解释性对大模型的下游任务适配做训练级别可控性增强研究。其实总结成两句话就是&#xff1a; 1.大模…

Spring【@Resource、@Autowired+lombook+Bean的生命周期】

Resource 和 Autowired 的区别 在Spring中找Bean的两种方式&#xff1a;①先根据类型查找②再根据名称查找 Autowired先根据类型查找&#xff0c;再根据名称查找【根据上述查找结果不唯一&#xff0c;再添加一个 Qualifier(value“”)&#xff0c;就可以查找】 Resource先根据名…

【12】c++设计模式——>单例模式练习(任务队列)

属性&#xff1a; &#xff08;1&#xff09;存储任务的容器&#xff0c;这个容器可以选择使用STL中的队列&#xff08;queue) &#xff08;2&#xff09;互斥锁&#xff0c;多线程访问的时候用于保护任务队列中的数据 方法&#xff1a;主要是对任务队列中的任务进行操作 &…

【C++ 学习 ㉖】- 布隆过滤器详解(哈希扩展)

目录 一、布隆过滤器的简介 二、布隆过滤器的实现 2.1 - BloomFilter.h 2.2 - test.cpp 一、布隆过滤器的简介 布隆过滤器&#xff08;Bloom Filter&#xff09;是由 Burton Howard Bloom 在 1970 年提出的一种紧凑型的、比较巧妙的概率型数据结构&#xff08;probabilist…

【gcc】RtpTransportControllerSend学习笔记 3:gcc 算法

本文是大神 https://www.cnblogs.com/ishen 的文章的学习笔记。大神的webrtc源码分析(8)-拥塞控制(上)-码率预估 详尽而具体,堪称神作。本文使用的代码是m79 ,与大神有不同。ChatGPT可以做WebRTC音视频质量性能优化,惊艳到我了 指出了一些QOS学习的方向。大神给出的码率预估…

【排序算法】插入排序

文章目录 一&#xff1a;基本概念1.1 介绍1.2 原理1.3 插入排序法思想 二&#xff1a;代码实现2.1 源码2.2 执行结果2.3 测试八万条数据 三&#xff1a;算法分析3.1 时间复杂度3.2 空间复杂度3.3 稳定性 一&#xff1a;基本概念 1.1 介绍 插入式排序属于内部排序法&#xff0…

【GIT版本控制】--提交更改

一、添加文件到暂存区 在GIT中&#xff0c;要提交更改&#xff0c;首先需要将文件添加到暂存区&#xff08;Staging Area&#xff09;。这是一个用于存放将要提交的更改的临时区域。以下是将文件添加到暂存区的步骤&#xff1a; 打开终端或命令提示符&#xff1a;首先&#x…

基于KubeAdm搭建多节点K8S集群

基于KubeAdm搭建多节点K8S集群 1、基本流程&#xff08;注意 docker 版本和kubeadm、kubelet、kubectl的关系&#xff09;2、安装utils依赖&#xff08;安装范围&#xff1a;主节点工作节点&#xff09;3、安装docker &#xff08;安装范围&#xff1a;主节点工作节点&#xff…

Maven 自动化构建

自动化构建定义了这样一种场景: 在一个项目成功构建完成后&#xff0c;其相关的依赖工程即开始构建&#xff0c;这样可以保证其依赖项目的稳定。 比如一个团队正在开发一个项目 bus-core-api&#xff0c; 并且有其他两个项目 app-web-ui 和 app-desktop-ui 依赖于这个项目。 …

kafka怎么实现零拷贝(Zero-Copy)的?

Kafka 实现零拷贝&#xff08;Zero-Copy&#xff09;主要依赖于操作系统和底层网络库的支持&#xff0c;而不是特定的算法。这是因为零拷贝是一种优化数据传输的技术&#xff0c;通常是通过操作系统和硬件来实现的。以下是 Kafka 如何实现零拷贝的一般原理&#xff1a; 直接内存…

Transformer预测 | Python实现基于Transformer的股票价格预测(tensorflow)

文章目录 效果一览文章概述程序设计参考资料效果一览 文章概述 Transformer预测 | Python实现基于Transformer的股票价格预测(tensorflow) 程序设计 import numpy as np import matplotlib.pyplot

COCI 2021-2022 #1 - Logičari 题解

题目大意 给定一个 n n n 个点的基环树&#xff0c;现在对基环树上的点染色&#xff0c;使得每个点都有且仅有一个与他相连的点&#xff08;不包括它自身&#xff09;被染色&#xff0c;求最少的染色点数&#xff0c;或者返回无解。 思路 先考虑树的情况。 容易想到 DP&am…

README文档模板

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

TCP和UDP的由浅到深的详细讲解

目录 前言 一.TCP 1.1 什么是TCP&#xff1f; 1.2TCP的连接与释放(确认应答机制&#xff09; 1.2.1三次握手 1.2.2四次挥手 1.3TCP滑动窗口&#xff08;效率机制&#xff09; 1.4流量控制&#xff08;安全机制&#xff09; 1.5拥塞控制&#xff08;安全机制&#xff0…

【力扣1812】判断国际象棋棋盘中一个格子的颜色

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析 一、题目描述 题目链接&#xff1a;判断国际象棋棋盘中一个格子的颜色 给你一个坐标 coordina…

环信web、uniapp、微信小程序SDK报错详解---登录篇

项目场景&#xff1a; 记录对接环信sdk时遇到的一系列问题&#xff0c;总结一下避免大家再次踩坑。这里主要针对于web、uniapp、微信小程序在对接环信sdk时遇到的问题。主要针对报错400、404、401、40 (一) 登录用户报400 原因分析&#xff1a; 从console控制台输出及networ…

【C++】哈希与布隆过滤器

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…