- 2024-09-10tailwindcss学习：2 自定义类的使用和常见的tailwindcss前缀
1.自定义类的定义在Tailwind CSS中，您可以通过 tailwind.config.js 文件定义自定义类。类似 border-custom-green 这种写法实际上是一个组合类，通常是由自定义类和内置类结合而成的。示例：自定义边框颜色假设您在 tailwind.config.js 中定义了一个自定义颜色：//tailwi
- 2024-09-06tailwindcss学习：1. vue项目配置 tailwindcss
官网的配置是需要一个cli去生成一份CSS，我简单总结一下更加干货的配置办法：1.pnpmipostcssautoprefixertypescript2.配置postcss.config.cjsmodule.exports={plugins:{tailwindcss:{},autoprefixer:{},},};3.执行npxtailwindcssinit4.项目的sr
- 2024-08-30laravel11+vue项目
laravel11+vue项目视频地址https://www.youtube.com/watch?v=s6P1dDfl56s&list=PL38wFHH4qYZUdIKP9jG371N3G4kbWAg2c&index=2项目初始化地址直接下载https://github.com/JonVadar/Laravel-Inertia-Vue-Starter``composerinstallnpminstall复制.env.example文件并将其
- 2024-08-24React 和 Vite 环境下 TailwindCSS 的配置指南
1.安装tailwindcssnpminstall-Dtailwindcsspostcssautoprefixer2.生成tailwindcss配置文件npxtailwindinit-p3.tailwind.config.js配置/**@type{import('tailwindcss').Config}*/exportdefault{content:["./index.html",&q
- 2024-08-22uni-app Vue3项目引入Tailwind CSS
前情TailwindCSS是一个原子类CSS框架，它将基础的CSS全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性也不错。它的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名，然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、
- 2024-08-18lit tailwindcss vite模板
pnpmcreatevite@latestmy-project----templatelitcdmy-projectpnpminstall-Dtailwindcsspostcssautoprefixersass-embeddednpxtailwindcssinit-ptailwindcss.config.js:/**@type{import('tailwindcss').Config}*/exportdefault{core
- 2024-08-05【Vitepress系列】-- 自定义组件及布局，配置tailwindcss、配置Markdown
Vitepress自定义页面，以及配置tailwindcssvitepress中，除了使用一些配置项目，还可以通过写vue代码，来做一个定制化的UI。下面这个UI主页便是vue组件+tailwindcss做的一.自定义vitepress中，如果内置的home、doc、page不满足需求，还可以自己写vue代码进行自定义1.1自定义布
- 2024-07-15在 DjangoStarter 中集成 TailwindCSS
前言好久没有更新技术文章了这个月开箱和随笔倒是写了不少，又忙又懒的基础的文章不太想写，稍微深入一点的又需要花很多时间来写虽然但是，最终还是想水一篇最近做了一个基于wagtail的项目，有不少东西可以记录。本文先记录一下把tailwindcss支持添加到DjangoStarter框架里使
- 2024-07-12解决若依框架与tailwindcss 样式冲突问题
首先下载tailwindcss样式https://www.tailwindcss.cn/docs/installation我们可以按照官方文档来进行配置 npminstall-Dtailwindcssnpxtailwindcssinit /**@type{import('tailwindcss').Config}*/module.exports={content:["./src/**/*.{html,js}"],the
- 2024-06-08Tailwindcss Layout布局相关样式及实战案例，5万字长文，附完整源码和效果截图
aspect相关样式类基础样式ClassPropertiesaspect-autoaspect-ratio:auto;aspect-squareaspect-ratio:1/1;aspect-videoaspect-ratio:16/9;案例：引入B站视频Usetheaspect-*utilitiestosetthedesiredaspectratioofanelement.使用’aspect-*'实用工
- 2024-04-25Tailwind
一、安装TailwindCSSnpminstall-Dtailwindcssnpxtailwindcssinit二、配置模板文件的路径在tailwind.config.js配置文件中添加所有模板文件的路径。/**@type{import('tailwindcss').Config}*/module.exports={content:['index.html','src/**/*.{vue,js,ts,jsx,t
- 2024-04-19tailwindcss
TailwindCSS是一个为快速创建定制化UI组件而设计的实用型框架。与其他CSS框架或库不同，TailwindCSS组件没有预先设置好样式。可以使用Tailwind的低级实用类来为CSS元素设置样式，如margin、flex、color等。自从2017年发布以来，TailwindCSS越来越受欢迎，因为它允许开
- 2024-04-12tailwindcss/React 性能优化
tailwindcssvscode空格才出提示https://v2ex.com/t/1027326#reply4"editor.quickSuggestions":{"strings":true}React性能优化实用技巧在开发React应用时，性能优化是一个永恒的话题。本文将分享几个实用的工具和技巧，帮助你提升React应用的性能。ReactDeveloperToo
- 2024-03-26tailwindcss 默认的button按钮样式导致其他ui库，如antd、element等透明失效问题的终极探讨
我先说一下好消息，这个问题在官方层面已经准备解决了，并且在当前版本（3.4.1）的下一个正式版彻底解决。这里是原文：https://github.com/tailwindlabs/tailwindcss/pull/12735但截至目前24.3.26日，仍然没发布新版。官方的解决办法也很简单，就是降低优先级原来的：button,[type='button
- 2024-03-06Nuxt3-tailwindcss使用
Nuxt3使用 tailwindcss文档：https://www.tailwindcss.cn/docs/installation安装文档：https://tailwindcss.nuxtjs.org/getting-started/installation1、安装 @nuxtjs/tailwindcssyarnadd-D@nuxtjs/tailwindcss2、nuxt.config.ts中配置exportdefaultdefineNuxtConfig
- 2024-02-26umijs 项目配置问题汇总
umi配置问题汇总umi或@umijs/max集成tailwindcss正常umi内置了tailwindcss插件，详情可参考官方文档TailwindCSS配置生成器但是由于内置的tailwindcss插件过老，umi官方已不推荐使用内置，建议使用tailwindcss官方的配置。详情可见issue同时，umi官方也不推荐使用p
- 2024-01-24Vite安装React TS Tailwind项目
安装Vitenpminstallvite@latest或者yarncreatevite##Vite安装React项目+TS安装完vite之后，我们就可以使用vite来创建项目了，vite为我们提供了很多模版，我们只需要选择我们需要的就可以了。我们可以在创建项目的时候在命令当中指定对应的模版。```sh#npm安装npm
- 2024-01-01如何在Nuxt 3中为<html>和<body>标签添加Tailwind CSS类？
在Nuxt3中为<html>和<body>标签添加TailwindCSS类，可以参考以下步骤：安装TailwindCSS：在项目根目录下运行以下命令安装TailwindCSS和其依赖：npminstalltailwindcss@latest@tailwindcss/typography@latestpostcss@latestautoprefixer@latest创建TailwindCSS配
- 2023-11-26我受够了前端的复杂性了
虽然前端的工具在不断的迭代并尝试让工具的配置尽可能的简单，但是还是太重了，在开发一些简单的页面的时候我根本就不要什么虚拟DOM,什么MVVC,最重要的是，我不想要单独维护一个代码仓库,所以对应简单的页面，我决定重新走后端渲染前端页面的老路。值得注意的是，我并不是要否定前端框
- 2023-11-01tailwindcss 实现常见样式
设置宽高w-number,h-numberflex实现水平垂直居中flex设置容器为flex容器flex-row/flex-column设置主轴方向justify-center设置主轴方向居中，类似还有justify-start,justify-enditems-center设置交叉轴方向居中，类似还有items-start,items-end画borderborde
- 2023-10-16放弃WordPress，纯手撸一个导航网站
最近AI好火啊，各种AI工具导航网站也层出不穷，思路就是建站然后流量做大赚广告费。于是，我仔细研究下了所谓的导航网站，不仅AI领域，其他诸如编程啊，产品经理啊，跨境电商啊等等行业都有导航站，的确极大的增加了工作效率，做到了工具和资源的整合。从技术的角度讲，各大导航网站无一例外都是使
- 2023-10-11开局就集成tailwindcss（一）
1.使用cli创建项目npmcreatevite@latest项目名--templatereact-ts 2.因为css功底偏弱，所以必须也是完全有必要的，在这里必须集成一下tailwindcss，npminstalltailwindcssautoprefixerpostcss-cli#额外的安装2个配套的插件#autoprefixer自动添加样式的前缀，很
- 2023-09-05如何在Nuxt 3中为<html>和<body>标签添加Tailwind CSS类？
在Nuxt3中为<html>和<body>标签添加TailwindCSS类，可以参考以下步骤：安装TailwindCSS：在项目根目录下运行以下命令安装TailwindCSS和其依赖：npminstalltailwindcss@latest@tailwindcss/typography@latestpostcss@latestautoprefixer@latest创建TailwindCSS配置
- 2023-08-29tailwindcss -原子化 CSS 框架
原子化CSS框架我记得很久之前有时候为了少写些css，我们通常会有如下的样板代码.block{display:block;}.flex{display:flex}.flex-center{align-items:center;justify-content:center;}.w1{width:1%;}/*1...100*/.w100{width:100%;}
- 2023-08-12Bug解决
1.ReferenceError和TypeError为什么区分LHS和RHS是一件重要的事情?因为在变量还没有声明(在任何作用域中都无法找到该变量)的情况下，这两种查询的行为是不一样的。考虑如下代码:functionfoo(a){ console.log(a+b); b=a;}foo(2);第一次对b进行RHS查询时是无法找