- 2024-11-12Bootstrap vs TailwindCSS
在为您的网页设计项目选择Bootstrap和TailwindCSS之间犹豫不决？以下是帮助您做出决定的快速概述：Bootstrap提供了即用型组件，便于快速开发，但定制性有限。TailwindCSS提供了实用类，设计高度可定制，但需要更多的前期工作。性能：TailwindCSS通过删除未使用的样式，可能使您的网
- 2024-10-30Vue3中前台前端解决方案速记
WebpackVSVite：Webpack默认构建整个应用；稳妥Vite只构建必须构建的内容；以原生ESM方式提供源码，让浏览器构建；快用Vite创建一个项目：
[email protected]@latest在局域网内运行项目：package.json"scripts":{"dev":"vite--host",在Vite项目中安装tailwindcss：
- 2024-09-24UnoCSS 给了我一个不用 tailwindcss 的理由
如果你没有听说过 tailwindcss或者 unocss，请先 return 先去了解一下。开发上：可能为你甚至你们的前端团队节省很多写样式的时间，也能让你或者你们的项目开发体验有很大提升生产上：你们的项目打出来的包体积中的样式代码占比将突然骤降然后趋于不变。为什么我换到了UnoCSSt
- 2024-09-22使用 Nextjs Prisma、TailwindCSS 和 Next Auth 进行旅行预订
旅行预订应用程序使用next.js14、tailwindcss、typescript和prisma进行中的旅行应用程序。允许用户注册、游览浏览、预订和评论提交。对开发过程中的所有贡献开放。入门克隆存储库：gitclonehttps://github.com/saidmounaim/travel-booking.git安装依赖项：npminstall
- 2024-09-14vite tailwindcss@next omi
pnpmi@tailwindcss/vite@
[email protected]:{ "type":"module", "dependencies":{ "@tailwindcss/vite":"4.0.0-alpha.24", "omi":"^7.7.0", "tailwi
- 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