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.rhkb.cn/news/153470.html

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

相关文章

超市微信小程序是怎么做的

市微信小程序是利用微信小程序平台为超市或零售商提供线上销售服务的一种应用。通过小程序&#xff0c;超市可以向消费者提供更加便捷、快速、个性化的购物体验&#xff0c;从而提升销售业绩、增加客户满意度。以下是超市微信小程序可以实现的一些主要功能。 一、商品展示与搜索…

linux centos出现No space left on device解决方案

问题是因为系统磁盘空间不足 解决方法: 找到那个磁盘不足问题 df -lh 发现/dev/mapper/cl-root磁盘已用50G,有如下 解决方案&#xff1a; 1、如果是虚拟机可以通过分配空间使其空间增加 2、将其他不常用磁盘空间分配给cl-root如&#xff08; /dev/mapper/cl-home &#…

XSS原理

原理&#xff1a; 这是一种将任意 Javascript 代码插入到其他Web用户页面里执行以达到攻击目的的漏洞。攻击者利用浏览器的动态展示数据功能&#xff0c;在HTML页面里嵌入恶意代码。当用户浏览改页时&#xff0c;这些潜入在HTML中的恶意代码会被执行&#xff0c;用户浏览器被攻…

6-3 递增的整数序列链表的插入 分数 5

List Insert(List L, ElementType X) {//创建结点List node (List)malloc(sizeof(List));node->Data X;node->Next NULL;List head L->Next; //定位real头指针//空链表 直接插入if (head NULL) {L->Next node;node->Next head;return L;}//插入数据比第…

哈夫曼树哈夫曼编码知识点

目录 前言 哈夫曼树 1.相关背景 2.基本概念 3.什么是哈夫曼树 3.特点 4.哈夫曼树的构造&#xff08;哈夫曼算法&#xff09; 5.带权路径长度计算 哈夫曼编码&#xff08;哈夫曼树的应用&#xff09; 1.基本概念 2.编码方式 3.编码依据 4.小试牛刀&#xff08;习题&am…

智慧楼宇3D数据可视化大屏交互展示实现了楼宇能源的高效、智能、精细化管控

智慧园区是指将物联网、大数据、人工智能等技术应用于传统建筑和基础设施&#xff0c;以实现对园区的全面监控、管理和服务的一种建筑形态。通过将园区内设备、设施和系统联网&#xff0c;实现数据的传输、共享和响应&#xff0c;提高园区的管理效率和运营效益&#xff0c;为居…

socket can查看详细信息 命令 ip -details -statistics link show can0

ip -details -statistics link show can0 ip -details link show can0 ip -statistics link show can0 也可以像第一行那样结合使用

Synchronized的实现和锁升级

1.JVM是如何处理和识别Synchronized的&#xff1f; 我们从字节码角度分析synchronized的实现&#xff1a; Synchronized(锁对象){}同步代码块底层实现方式是monitorenter和monitorexit指令。 修饰普通同步方法时底层实现方式是执行指令会检查方法是否设置ACC_SYNCHRONIZED&am…

登陆认证权限控制(1)——从session到token认证的变迁 session的问题分析 + CSRF攻击的认识

前言 登陆认证&#xff0c;权限控制是一个系统必不可少的部分&#xff0c;一个开放访问的系统能否在上线后稳定持续运行其实很大程度上取决于登陆认证和权限控制措施是否到位&#xff0c;不然可能系统刚刚上线就会夭折。 本篇博客回溯登陆认证的变迁历史&#xff0c;阐述sess…

如何打造一个网络框架模块对接服务器

一、了解网络框架的基本原理 在开始打造网络框架模块之前&#xff0c;首先需要了解网络框架的基本原理。网络框架是一个软件模块&#xff0c;用于处理网络通信的各种细节&#xff0c;包括数据传输、协议解析、错误处理等。常见的网络框架有HTTP、TCP/IP、WebSocket等。 对啦&…

在Remix中编写你的第一份智能合约

智能合约简单来讲就是&#xff1a;部署在去中心化区块链上的一个合约或者一组指令&#xff0c;当这个合约或者这组指令被部署以后&#xff0c;它就不能被改变了&#xff0c;并会自动执行&#xff0c;每个人都可以看到合约里面的条款。更深层次的理解就是&#xff1a;这些代码会…

微信小程序案例:2-2本地生活

文章目录 一、实现步骤&#xff08;一&#xff09;创建项目&#xff08;二&#xff09;创建页面&#xff08;三&#xff09;准备图片素材&#xff08;四&#xff09;编写页面结构1、编写轮播区域页面结构2、编写九宫格区域页面结构 &#xff08;五&#xff09;编写页面样式1、编…

Redis-持久化机制

持久化机制介绍 RDBAOFRDB和AOF对比 RDB rdb的话是利用了写时复制技术&#xff0c;他是看时间间隔内key值的变化量&#xff0c;就比如20秒内如果有5个key改变过的话他就会创建一个fork子进程&#xff08;bgsave&#xff09;&#xff0c;通过这个子进程&#xff0c;将数据快照进…

Golang网络编程:即时通讯系统Instance Messaging System

系统基本架构 版本迭代 项目改造 无人机是client&#xff0c;我们是server&#xff0c;提供注册登入&#xff0c;场景选择等。信道模拟器是server&#xff0c;我们是client&#xff0c;我们向信道模拟器发送数据&#xff0c;等待信道模拟器计算结果&#xff0c;返回给无人机。…

MFC 鼠标悬停提示框

MFC 鼠标悬停提示框 运行效果 在MFC窗口中添加一个控件 工具栏中拖拽List Box到MFC窗口给List Box添加变量 CListBox m_listbox 增加成员变量 CWnd* m_tip_parent_wnd; CToolTipCtrl m_tip;给m_listbox创建提示框 void create_tip_window(CWnd* tip_wnd, CToolTipCtrl* ti…

[nltk_data] Error loading stopwords: <urlopen error [WinError 10054]

报错提示&#xff1a; >>> import nltk >>> nltk.download(stopwords) 按照提示执行后 [nltk_data] Error loading stopwords: <urlopen error [WinError 10054] 找到路径C:\\Users\\EDY\\nltk_data&#xff0c;如果没有nltk_data文件夹&#xff0c;在…

Magica Cloth 使用方法笔记

Magica Cloth 使用方法笔记 官方使用文档链接&#xff1a; インストールガイド – Magica Soft 鱼儿效果案例&#xff1a; https://www.patreon.com/posts/69459293 安装环境&#xff1a; 关于在Unity 2018.4.12版本 下 导入 Magic Cloth 之前&#xff0c;需要提前置入的…

FreeRTOS学习笔记(一)

一、基础知识思维导图 vtaskdelay函数会开启中断&#xff0c;所以在临界区不能用vtaskdelay 二、任务的创建与删除 2.1、任务的动态创建与删除 ........#define START_TASK_PRIO 1 #define START_TASK_STACK_SIZE 128 TaskHandle_t start_task_handler; void …

springboot项目集成kafka,并创建kafka生成消息线程池

效果图: 步骤1:添加依赖 <!-- kafka依赖 --><dependency><groupId>org.apache.kafka</groupId><<

vue-slot插槽

作用&#xff1a;让父组件可以向子组件中任意位置插入html结构&#xff0c;也是组件通信方式的一种&#xff0c;适用于父组件》子组件 分类: 默认插槽、具名插槽、作用域插槽 定义子组件时使用slot组件&#xff0c;在使用子组件是可以决定是否插入具体的html代码 默认插槽 如…