首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用过 tailwindcss 才知道,命名真的是顶级痛点

这玩意儿第一印象给人的感觉,就是 tailwindcss 一毛一样。这么也太复杂了,如果样式写多了,那还得了,代码还能看? 但是我写着写着,你猜怎么着?越写越爽。为什么呢?...✓margin: 1px 与 m-1 的映射关系可以自己配置 对我来说,这个地方爽在哪呢?这不就跟我以前输入 css 样式的时候,基本上一致的补全逻辑。...React 的 Tailwind UI 依赖于Headless UI来支持所有交互行为,并依赖于Heroicons来提供图标,因此你需要将这两个库添加到你的项目中: npm install @headlessui...这些库和 Tailwind UI 本身都需要 React >= 16。 4、在 vite + react 引入 具体如何引入,有许多文章都有说,大家可以用的时候针对性的去寻找解决方案。...配置 postcss 然后就可以了。

9510

使用 Radix UI 和 Tailwind CSS 构建的精美组件

它是可重复使用的组件的集合,您可以将其复制并粘贴到您的应用。 不是组件库是什么意思? 我的意思是您不要将其安装为依赖项。它不可用或通过 npm 分发。 选择您需要的组件。...代码复制并粘贴到您的项目中,并根据您的需求进行自定义。代码是你的。 如何安装? 我们可以在Next.js、Vite、Remix、Laravel等安装依赖和构建应用。...npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 复制 编辑 tsconfig.json 文件 将以下代码添加到文件以解析路径.../src/*" ] } // ... }} 复制 更新 vite.config.ts 将以下代码添加到 vite.config.ts,以便应用可以无错误地解析路径 # (so you...› no / yes (no) 复制 就是这样 现在,您可以开始向项目添加组件。 npx shadcn-ui@latest add button 复制 上面的命令会将组件添加到您的项目中。

1.6K21
您找到你想要的搜索结果了吗?
是的
没有找到

高效地 TailwindCSS 与 Nuxt 结合使用

在这篇文章,我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地 TailwindCSS 与 Nuxt 应用程序结合使用。...或者您可以按照以下命令使用官方Nuxt TailwindCSS 模块: yarn add -d @nuxtjs/tailwindcss 然后将该模块添加到modules以下部分nuxt.config.ts...nuxt.config.ts我们需要通过将以下代码添加到您的 Nuxt 配置对象来指定文件该文件的路径: tailwindcss: { configPath: '~/tailwind.config.ts...我们可以为网站上显示的每个图标选择各种选项,从 Vue 组件和 React 组件到简单的 SVG 文件。 您可以下载所需图标的相关代码段并将其复制并粘贴到您的应用程序。...该工具允许我们上传图像,它将以 TailwindCSS 格式生成四种主要调色板及其色调,如以下屏幕截图所示: 剩下的就是生成的代码复制并粘贴到您的tailwind.config.ts文件,然后您就可以在应用程序中使用调色板了

39920

React.js 实战之 State & 生命周期函数转换为类为一个类添加局部状态生命周期方法添加到

然后它能更新自身 为实现这个需求,我们需要为Clock组件添加状态 状态与属性十分相似,但状态是私有的,完全受控于当前组件 我们之前提到过,定义为类的组件有一些特性 局部状态就是如此:一个功能只适用于类 函数转换为类...函数组件 Clock 转换为类 创建一个名称扩展为 React.Component 的ES6 类 创建一个render()空方法 函数体移动到 render() 在 render() ,使用...this.props 替换 props 删除剩余的空函数声明 Clock 现在被定义为一个类而不只是一个函数 使用类就允许我们使用其它特性,例如局部状态、生命周期钩子 为一个类添加局部状态 三步...结果如下 接下来,我们将使Clock设置自己的计时器并每秒更新一次 生命周期方法添加到 在具有许多组件的应用程序,在销毁时释放组件所占用的资源非常重要 每当Clock组件第一次加载到...DOM时,我们都想生成定时器,这在React中被称为挂载 同样,每当Clock生成的这个DOM被移除时,我们也会想要清除定时器,这在React中被称为卸载 我们可以在组件类上声明特殊的方法,当组件挂载或卸载时

2.1K40

使用Next.js搭配tailwindcss纯手工打造一个网站是什么样的体验

而Next.js则是一个基于React的一个非常流行的框架。可以把Next.js与Vue相类比,它在React的基础之上,提供了开箱即用的构建支持,路由支持,图片加载优化等支持。...这意味着使用Next.js,你可以做到与Vue一样,享受到开箱即用的解决方案。 其实,坦率的看,React的劣势也是它的优势。...针对前端开发,CSS存在大量重复并且难以命名的难点,tailwindcss基于CSS定义了一整套内置的可反复重复使用的CSS定义。...这个DIV默认是文字是黑色,但在暗黑模式下为白色 以上述这个tailwindcss定义为例,你可以在同一个class定义对不同设备的显示效果。...使用tailwindcss的优势意味着你只需要熟悉tailwindcss内置的这些CSS组合包,就已经足够实现一个样式优美的网页。 我们都知道二八原则,80%的样式,可能只用到20%的CSS点。

2.8K10

从文档开发框架到package.json,带你走一轮React组件库构建与发布

组件库经典方案 github-pages发布组件库文档 同时,相关demo已以分支的形式放在了github上,可以拉下来尝试https://github.com/GrinZero/magic-design-react...所以我对比tailwindcss和windicss后选择了tailwindcss 一方面,经过调研,常规认知tailwindcss的卡顿特性,随着“JIT”模式的推出,已经消失得一干二净。...,默认使用father4.rc来进行构建,我们需要手动版本修改为更稳定的2.x,我这里是使用2.30.21 3.1.3 安装tailwindcss 值得注意的是,由于tailwindcss3依赖于postcss8...#3 extraPostCSSPlugins 我们发现,这里新增了两个插件 其中,tailwindcss负责为我们引入tailwindcss,而postcss-import则是做了一个把css文件的...最后,亲来参观下我的组件库吧https://grinzero.github.io/magic-design-react/swiper/corner-swiper (也可以给组件库点个star哦https

3.8K20

可以在不source脚本的情况下变量从Bash脚本导出到环境

echo $VAR 有没有一种方法可以通过只执行 export.bash 而不 source 它获取 $VAR? 答: 不可以。 但是有几种可能的解决办法。...在调用 shell 的上下文中执行脚本: $ cat set-vars1.sh export FOO=BAR $ . set-vars1.sh $ echo $FOO BAR 另一种方法是在脚本打印设置环境变量的命令.../set-vars2.sh)" $ echo "$FOO" BAR 在终端上执行 help export 可以查看 Bash 内置命令 export 的帮助文档: # help export export...-f 指 shell 函数 -n 从每个(变量)名称删除 export 属性 -p 显示所有导出变量和函数的列表 ---- 参考: stackoverflow question 16618071...help eval 相关阅读: 用和不用export定义变量的区别 在shell编程$(cmd) 和 `cmd` 之间有什么区别 ----

14320

使用Ionic React实现的无限滚动效果

tabs --type react 正式开始 Ionic 中用于创建新应用的入门工具包包括三个标签,三个页面。...它们本就是React的功能组件。为了方便起见,我们分别在每个文件的第一个标签实现解决的方案. ....所以,在使用的过程,很有可能会有重复的“狗狗”。 加载初始数据 Ionic 提供了我们可以在应用程序中使用的多个生命周期事件,它不仅为标准组件库提供了这类事件,也同样为功能组件提供了类似事件。...void>) { await fetchData(); ($event.target as HTMLIonInfiniteScrollElement).complete(); } 最后,我们Ionic...import {IonInfiniteScroll, IonInfiniteScrollContent} from '@ionic/react'; 并且,在页面渲染: <IonInfiniteScroll

3K60

每日前端夜话(0x05):2018年JavaScript状态调查(下)

Ionic GitHub 36k stars 使用开放式Web技术构建令人惊叹的原生和渐进式Web应用。应用程序可以运行在任何设备上? Ionic 随时间的流行度 ? Ionic 最受喜欢的方面 ?...Electron的多功能性(它可以与任何UI框架一起使用,即使它通常与React或Vue.js相关联)也可以解释为什么它获得该类别的最高满意度。...作为React Native的替代方案,如果不想用React模式,在JavaScript编写跨平台应用的开发者可以关注Weex,这可以让他们使用Vue.js生态系统。...你能猜出哪种技术在每个类别夺魁? (注意:我们已从奖项中排除ES6以避免数据偏差) 最满意奖 获得用户满意百分比最高的库 ?...Reason 最可能替代Facebook团队使用的两个库:React和GraphQL。 Reason会遵循同样的路线? Svelte Parcel 特别奖 今年我们刚刚爱上的技术。 ?

2.1K40

23年最火的前端组件库项目,竟然是它!

特点 多种主题可直接套用 丰富的组件类型 100%定制化 复制粘贴就能使用 完整的无障碍体验 与 React Hook Form 和 Zod 的表单进行结合 多种主题可直接套用 除了有精美的官方主题外,...在 Shadcn/UI 官网上有一个主题编辑器,点击 Customize 按钮可以实时切换风格和主题颜色,设计完成后,我们只需要拷贝 css 主要变量到我们的程序即可 丰富的组件 Shadcn UI...以下面这个button元件为例,当我们透过CLI指令button新增到我们的项目中,会看到在comeponents文件夹下面多了一个ui文件夹,其中就能找到刚刚新增的button元件。.../src/*"] } 执行 shadcn-ui CLI 指令来初始化 Shadcn ui npx shadcn-ui@latest init 安装button 组件,会将 button 组件文件添加到你的...components/ui 文件夹: npx shadcn-ui@latest add button 然后可以在页面 import 刚刚新增的 Button 组件 import { Button

1.5K10

【开发指南】(三)认识ionic3

调用原生SDK开发; 加壳在线WebApp是在一个WebView容器执行,网页部署在服务器,基本不调用原生功能; 而混合式开发,如果有了解过一些的话,那一定应该听说过PhoneGap/Cordova和React...---- 此文中的主角Ionic,就是Hybird技术的第一代代表,有人会问,既然都发展到第三代了,还有必要学习?...typescript 新版的支持 这一次的更新提升typescript应用构建和类型检查的速度并且引入了对mix-in的支持等。...@IonicPage装饰器 ionic2导航器不是基于url的,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦的,而在新版本可以通过@IonicPage装饰器来实现。...懒加载 Ionic3.0版本开始,支持了延迟加载,我们可以某些模块设置为延时加载,只有用户打开相关的页面的时候,这个模块所在的js才会被下载,这样能减少用户初次下载的文件的大小。

2.7K40

只需6步,就能让你的 React +Tailwind.css站点实现暗黑功能

今天,我们进入神秘的世界,探索如何在你的React.js网站中使用Tailwind.css实现暗黑模式。...Tailwind.css 是你编码工具的强大助手,结合React.js使用,你可以创造出令人惊叹的效果。 本教程非常适合那些想要扩展技能并为他们的网站添加一项备受追捧的新功能的人。...如果你还没有完成安装,可以查看官方React文档,其中有一个快速简单的指南,教你如何设置React应用程序。...如果你还没有这个文件,可以通过运行以下命令来生成它: npx tailwindcss init 在你的tailwind.config.js文件,通过添加以下内容来启用暗黑模式: module.exports...运行你的应用程序: npm start 你应该可以通过应用程序的按钮在浅色和暗黑模式之间切换。点击按钮切换页面的整体主题,而Tailwind的暗黑模式实用工具帮你处理其余的细节问题。

51140

使用 React 和 Tailwind 创建阅读进度条

目录 前言 实现逻辑 代码 样式 前言 我们在上网的时候经常会看到一些优秀的博客顶部有个进度条,这个进度条有助于读者衡量阅读进度,我认为这个功能可以带来良好的用户体验,所以,应该将其添加到我个人博客上的文章...实现逻辑 获取页面可以滚动的高度. 获取页面已经滚动的高度....阅读进度=已经滚动的高度/页面可以滚动的高度 代码 单独定义一个 react hook 来活动当前的阅读进度 import { useEffect, useState } from 'react' export...{ window.removeEventListener('scroll', updateScroll) } }, []) return progress } 剩下的工作是进度显示在页面上...样式 我的博客使用了 TailwindCSS,用它制作进度条非常容易 export default function ProgressBar() { const progress = useReadingProgress

74920

Ionic vs React Native: 移动开发哪家强 ?

使用 React Native,可以为每个选定的平台本地组件创建不同的选项。 ● 可建模解决方案。 Ionic 是一个适合“一次编写,随处运行”的框架。这意味着,对正确书写和结构化的要求更高。...关于 React Native,可以创建一个尽可能接近本机的设计,虽然这个过程比 Ionic 要耗时,因为特定的元素必须为特定平台设置。 ● 性能。...在 React Native vs. Ionic 的性能React Native 框架获胜。 ● 个人风格。 Ionic 2 使用普通的 SASS 预处理器。...可以简单地在命令提示符界面中生成空白的应用程序: ionic start myApp blank –V2 //command for Ionic 2 react-native init AwesomeProject...如果还需要在 Windows 通用平台具有兼容性,那么需要在 React Native 安装支持插件(Ionic 默认支持该平台)。

5K50

实现一个 Code Pen:(一)项目初始化

前言 前段时间掘金上线了一个新功能 Code pen,可以在线写代码,浏览器就可以运行预览,在文章中就可以插入代码片段,对 web 开发者大有裨益,非常方便读者对文章的理解,笔者对这种在线实时编辑的功能充满了好奇...安装 tailwindcss 相关包,初始化 tailwind.config.js npm install -D tailwindcss postcss autoprefixer npx tailwindcss...init -p 修改 tailwind.config.js 配置,代码移动到src目录下,这个是我的个人偏好 module.exports = { content: ['....页面主体部分 我们先安装 react-split-pane, 把我们的页面拆分成几块,分为 HTML,CSS,JS,可以拖拽视窗大小,这个包依赖版本是 react16, 由于 react 是平滑升级,所以可以强制安装...npm i react-split-pane --force 使用 react-split-pane ,初始化页面结构, react-split-pane 是页面拆分成 2 块,若要拆分成 3 块的话

68640

苹果拒绝支持PWA的行为对Web贻害无穷!

PWA 使你可以用 JavaScript 来创建一个“Service Worker”,它为你提供与原生应用相关联的各种功能,例如推送通知,离线支持和应用的加载屏幕 —— 这一切可都是基于Web的!...而且很容易找出原因: 苹果对待Web应用就像二等公民一样,因为它们不会在 app store 像原生应用那样赚钱。 必须明确告诉用户如何将你的应用程序添加到主屏幕上,这是一件可怕的事情。...我曾经尝试学习并使用 Ionic/Angular,但始终对它没有什么感觉。当看到那些在 Ionic 生态体系花费时间的开发公司时,我觉得他们可能搭错了车。...这仅仅是资本主义特色?只是谋求他们自己的好处?不!...还记得我们把这种行为称作什么——这对Web贻害无穷。 ----

1.8K30
领券