前端项目支持tailwindcss写样式

devtools/2024/11/25 8:54:25/
  • 安装
npm install -D tailwindcss
npx tailwindcss init
  • 配置 tailwind.config.js
//根据个人需求填写,比如vue简单配置
/** @type {import('tailwindcss').Config} */
module.exports = {darkMode: "class",corePlugins: {preflight: false},content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {colors: {bg_color: "var(--el-bg-color)",primary: "var(--el-color-primary)",primary_light_9: "var(--el-color-primary-light-9)",text_color_primary: "var(--el-text-color-primary)",text_color_regular: "var(--el-text-color-regular)",text_color_disabled: "var(--el-text-color-disabled)"}}}
};
  • Tailwind 的指令添加到你的 CSS 文件中,可以新建css文件并贴入以下代码,并且在main文件种引入该css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • postcss.config.js 调整
export default {plugins: {tailwindcss: {},autoprefixer: {}}
};

现在就可以在你的项目种直接使用tailwindcss,附上官网链接:tailwindcss


http://www.ppmy.cn/devtools/136797.html

相关文章

Spring—Bean工厂进一步学习

基于xml的spring应用 XML配置方式: 功能描述: bean的id和全限定名配置 通过name设置bean的别名,通过别名也能直接获取到bean实例 bean的作用范围 bean的实例化时机,是否延迟加载 bean实例化后自动执行的初识方法,method指定方法 bean实例销毁前的方法 设…

Python XML 解析

Python XML 解析 XML(eXtensible Markup Language)是一种用于存储和传输数据的标记语言。它是一种自我描述的语言,允许用户定义自己的标签和文档结构。Python 提供了多种库来解析 XML 数据,其中最常用的是 xml.etree.ElementTree…

Elasticsearch 实战应用:全面解析与实践

Elasticsearch 是一个基于 Lucene 构建的开源分布式搜索引擎,广泛应用于日志分析、全文搜索、实时分析等场景。它的高性能、高可扩展性和强大的查询能力使其成为现代应用中的核心组件之一。在本文中,我们将介绍 Elasticsearch 的基本概念、配置与搭建,并通过一个实际应用案例…

【unity小技巧】unity常用的编辑器扩展

文章目录 1. **自定义 Inspector(Inspector 面板)**示例: 2. **Editor Window(自定义编辑器窗口)**示例: 3. **PropertyDrawer(自定义属性绘制)**示例: 4. **菜单项&…

SQL进阶技巧:如何分析互逆记录?| 相互关注为例分析

目录 1 什么是互逆记录 2 互逆记录的解决方案 3 互逆记录应用【互相关注的人】 3.1 场景描述 3.2 数据准备

Excel求和如何过滤错误值

一、问题的提出 平时,我们在使用Excel时,最常用的功能就是求和了,一说到求和你可能想到用sum函数,但是如果sum的求和区域有#value #Div等错误值怎么办?如下图,记算C列中工资的总和。 直接用肯定会报错&…

Python脚本消费多个Kafka topic

在Python中消费多个Kafka topic,可以使用kafka-python库,这是一个流行的Kafka客户端库。以下是一个详细的代码示例,展示如何创建一个Kafka消费者,并同时消费多个Kafka topic。 1.环境准备 (1)安装Kafka和…

MT8768/MTK8768安卓核心板性能参数_联发科安卓智能模块开发方案

MT8768安卓核心板 是一款采用台积电12nm FinFET制程工艺的智能手机芯片。MT8768核心板不仅提供所有高级功能和出色体验,同时确保智能终端具备长电池寿命。该芯片提供了一个1600x720高清(20:9比例)分辨率显示屏,排除了清晰度和功耗之间的平衡问题。该芯片…