taiwindcss

devtools/2024/12/26 20:50:13/

1.安装

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

这会创建一个 tailwind.config.js 文件。注意:一定通过px tailwindcss init方式创建

2.tailwind.config.js

module.exports = {content: ['./index.html','./src/**/*.{js,ts,jsx,tsx,vue}', // 确保 Vue 文件被扫描],theme: {extend: {},},p

3.src/assets/tailwind.css

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

4.main.ts

import './assets/tailwind.css' // 引入 Tailwind CSS 样式文件

5.因为tailwindcss是依赖于postcss

创建postcss.config.js

export default {plugins: {tailwindcss: {},autoprefixer: {},},}

6.问题,如果这几个步骤发现没有实现,删除包以后重新试一下

    <div class=" bg-red-900 w-[100px] h-[100px] text-[red]">大屏</div>


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

相关文章

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc &#x1f4d6; 前言 在 CentOS 7 上使用 NVM 安装 Node.js 后&#xff0c;可能会遇到如下问题&#xff1a; node: /lib64/libm.so.6: version GLIBC_2.27’ not found (required by node) node: /lib64/libc.so.6:…

汽车IVI中控开发入门及进阶(44):杰发科智能座舱芯片

概述: 杰发科技自成立以来,一直专注于汽车电子芯片及相关系统的研发与设计。 产品布局: 合作伙伴: 杰发科技不断提升产品设计能力和产品工艺,确保产品达 到更高的质量标准。目前杰发科技已通过ISO9001质 量管理体系与CMMIL3认证。 杰发科技长期合作的供应商(芯片代工厂、…

今日总结 2024-12-25

一、开发要点总结 &#xff08;一&#xff09;组织架构编辑部门 数据交互与组件协作 共用 add-dept 组件实现新增和编辑场景&#xff0c;需精准区分两种场景下的数据获取、校验及处理逻辑。通过在父组件&#xff08;src/views/department/index.vue&#xff09;点击编辑时利用…

Gmsh有限元网格剖分(Python)---点、直线、平面的移动

Gmsh有限元网格剖分(Python)—点、直线、平面的移动和旋转 最近在学习有限元的网格剖分算法&#xff0c;主要还是要参考老外的开源Gmsh库进行&#xff0c;写一些博客记录下学习过程&#xff0c;方便以后回忆嘞。 Gmsh的官方英文文档可以参考&#xff1a;gmsh.pdf 但咋就说&a…

要查询 `user` 表中 `we_chat_subscribe` 和 `we_chat_union_id` 列不为空的用户数量

文章目录 1、we_chat_subscribe2、we_chat_union_id 1、we_chat_subscribe 要查询 user 表中 we_chat_subscribe 列不为空的用户数量&#xff0c;你可以使用以下 SQL 查询语句&#xff1a; SELECT COUNT(*) FROM user WHERE we_chat_subscribe IS NOT NULL;解释&#xff1a; …

MyBatis学习

1、MyBatis的执行流程 2、MyBatis支持延迟加载&#xff0c;但是默认是没有开启动。 3、MyBatis缓存

【C++11】可变模板参数

目录 可变模板的定义方式 参数包的展开方式 递归的方式展开参数包 STL中的emplace相关接口函数 STL容器中emplace相关插入接口函数 ​编辑 模拟实现&#xff1a;emplace接口 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板&#xff0c;相比 C9…

最近常用linux、docker命令总结

最近常用linux、docker命令总结 1.ss -ulwn2.lsof -i :80803. ps aux | grep php4.docker stats5.docker inspect milvusapi6.docker ps --format "{{.Names}}: {{.Command}}" --no-trunc 1.ss -ulwn 基本含义 ss&#xff1a;全称是 Socket Statistics&#xff0c;用…