tailwindcss破坏了我在angular项目中的一些风格 - 腾讯云开发者社区

文章/答案/技术大牛

发布

分享我在 vue 项目中关于 api 请求的一些实现及项目框架

本文主要简单分享以下四点如何使用 axios 如何隔离配置如何模拟数据分享自己的项目框架本文主要目的为以下三点希望能够帮到一些人希望能够得到一些建议奉上一个使用Vue的模板框架我只是把我觉得有用的东西分享出来罢了...关于开发环境和生成环境的配置读取看到很多中做法，分享下我在项目中使怎么做的。目前项目中的做法是在config文件夹中根据环境新建不同的配置，然后通过index.js暴露对应环境的配置。...关于在项目中使用 mock 看到好多项目把mock混在项目中使用，就感觉很难受，所以想办法独立出来了，功能不强大，只是足够用在一些小Demo上，简单模拟一下数据就可以让我们的Demo不用担心api接口失效导致...下面是我的解决方案 express-mockjs 的使用 express-mockjs 是大佬结合 express+mock-lite 构建的一个 api 服务中间件，用它可以快速的帮助我们在本地搭建一个...),仓库中docs中有一些独立的一些说明有兴趣可以查看。

1.3K1 0

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

我怎么可能接受这样的技术方案？早年 bootstrap 盛行的时候，我都没看它一眼。在 jquery 与 angular 的年代里，bootstrap 有多火呢？...而且 tailwindcss 的这个自动补全还要更简单更好用一些。我刚开始还以为需要很高的学习成本，这尼玛，0 成本上手了呀。...我这里就简单介绍一下如何在 vite + react 的项目中引入 ✓后续我准备在我的小程序项目中引入 tailwindcss，如果考虑到要兼容 PC 端，兼容我之前的那一套响应式方案，那么复杂度就上来了...install autoprefixer@latest 然后在根目录中创建配置文件 npx tailwindcss init 然后就在根目录生成了一个最基础的默认配置项 /** @type {import...使用熟练之后，在正式项目中，我们会逐渐发现有一些方式可以优雅的减少 class 名的数量，是一个用好了之后确实比较爽的技术方案。

1.7K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

高颜值 tailwindcss 后台模板分享

这个免费的 tailwindCSS 模板带有预构建的示例，因此开发过程是无缝的，从原型页面切换到真实网站非常容易完成。...Notus Angular 使用免费的 Tailwind CSS 和 Angular UI Kit 和 Admin 开始您的开发。...让 Notus Angular 以其酷炫的功能和构建工具让您惊叹不已，让您的项目达到一个全新的水平。 Notus Angular 是免费和开源的。...支持明暗主题适配，提供了非常丰富的表单元素，对于表单和表格的处理非常的方便。此外，它还提供了设计功能，可以轻松在页面设计和真实网站之间进行切换。...如果你正在寻找一个简约风格的模板，那么它应该比较适合你，这是几个极简主义模板，但是简约不简单。

4.1K3 0

解锁全栈能力：java程序员的全栈自我革新与ChatGPT的智能协助

在一些群里交流的时候，总会看到群友推荐 tailwindcss 这个组件，于是顺着这个方向继续找到了一个前端模板。...这个模板采用的是 tailwindcss+uikit 的组合，在大概浏览了代码结构后，我感觉这个组合就是针对java程序员而打造的啊。...老师傅诚不期我，非常适合构建那些需要一些动态交互但不需要构建完整单页应用（SPA）的项目。这完全符合我目前的场景啊，于是果断选之。...终问我最终选择的方案是：Alpine.js +UIkit+tailwindcss+javaTemplate ibeetl，使用IDEA开发。...开发和测试组件封装：封装每个组件为一个独立的文件或模块，这有助于在不同的页面和项目中重用。交互式原型测试：在开发过程中，创建交互式原型来测试组件的交互和样式，确保它们符合用户体验和设计要求。

1K1 0

Ng-Matero v15 正式发布

本文主要聊一下 Ng-Matero 升级 v15 时遇到的一些问题及感触。同时也简单说一下近期在 v14 中新增的几个功能。...另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明： Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件我觉得 v15 最大的变化不是 Angular，而是 Angular Material。...大部分组件都切换到了 MDC 风格，之前这些组件都是在 material-experimental 这个库中，现在转正了，而之前的组件都加上了 legacy- 前缀。...另外，form-field 组件移除了 legacy 样式，其实我最喜欢的还是这个风格。

6.9K4 0

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

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。...大家好，我是「前端实验室」爱分享的了不起~ 根据Github Star 新增情况，2023 年的 JavaScript 生态系统中最耀眼的明星项目无疑是 shadcn/ui,在不到一年的时间里面获得了39k...Star，在众多项目中脱颖而出。...在 Shadcn/UI 官网上有一个主题编辑器，点击 Customize 按钮可以实时切换风格和主题颜色，设计完成后，我们只需要拷贝 css 主要变量到我们的程序中即可丰富的组件 Shadcn UI...以及相关的套件，并生成 config 文件 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 在tsconfig.json

3.1K1 0

2022年面向前端开发人员的9个最佳UI组件库框架

在本文中，我们将探索在构建下一个项目时使用UI组件库或CSS框架的主要好处，然后我们将介绍一些目前市场上免费选项的绝佳选择！为什么要使用UI组件库？...无论UI组件库有多有用，在决定使用UI组件库之前，它仍然会附带一些你需要了解的注意事项：一些UI库的自定义选项比其他库少，这意味着它们可能不够灵活，以满足你的需求。...Flowbite库可以使用npm安装：确保你已首先在项目中安装和配置TailwindCSS 或使用yarn： 5）AntDesign AntDesign是由AntGroup和阿里巴巴巴的分支阿里巴巴云创建的设计语言和...MaterialUI是一套免费的开源CSS模块和组件，你可以使用它们以Google材料设计风格构建网站。它建立在流行的Bootstrap框架之上，并添加了新的组件和CSS类。...最初的MaterialUI只是一套针对希望在项目中使用谷歌设计语言的设计师的指南。它没有提供任何可用于使用它构建网站或应用程序的代码或工具。

18.6K7 3

苦练七天，魔功大成，我已彻底拿捏 tailwindcss

经过这个项目的历练，现在，我已熟练度拉满，彻底拿捏了 tailwindcss。魔功大成！这篇文章，就跟大家分享一下我在 tailwindcss 中已经使用到的高级用法。...当然我们还可以做其他的一些配置增强，但是大多都没什么用，对我来说，这里一个比较有用的配置项是 transform。...addBase({ 'button': { color: theme('colors.orange.700') } }) }) ] } 然后，我在项目中写上如下代码...borderRadius: '4px', borderColor: theme('colors.red.400'), margin: '1rem' } }) }), 然后我在项目中编写如下代码...但是官方文档对于配置文件的讲解有一些缺漏，导致我也花了很长时间，查了不少资料才最终读懂，因此这篇文章我把缺漏的部分补上，有助于道友们更加方便理解它，并结合官方文档彻底拿捏 tailwindcss 的自定义配置

1.1K2 2

Angular学习（03）--lint检查规范和WebStorm小技巧

在开始讲 Angular 各个核心知识点之前，想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置。...风格规范 Angular 项目的很多文件都是通过 Angular-CLI 工具的 ng 命令来生成的，生成时就有默认一些代码风格，而且，WebStorm 默认也有一些代码风格，也许有人觉得直接使用默认的风格来即可...我修改了部分默认的配置，下面给出的是所有项的配置，其中带有注释的配置项，就是我增加或修改原本默认的配置项，是基于我上面说的个人的一些习惯风格而进行的修改： "rules": { "arrow-return-shorthand...同理，也可以设置 CSS 的样式属性的对齐方式： ? 以上，只是我的个人风格习惯，大体上，我都直接按照默认的风格规范来遵守，但在个把一些项上，个人有不同的看法和习惯，所以修改掉了默认的风格配置。...另外，我比较习惯使用格式化代码操作，而且一个项目中，代码全是我自己写的可能性也很小，别人写的代码或多或少都存在一些风格规范问题，也没办法强制性要求他人必须遵守，所以，就瞎折腾了下 WebStorm 的相关配置

2.5K7 0

原来 React Native 已经如此成熟了

所以，其实我曾经一度放弃过 React Native，在非工作项目中几乎不会想到要使用它。直到最近，我迷上了 tailwindcss！...也因为这个冲动，我又重新花了很长时间去重新审视我以前并不喜欢的技术栈，比如 Vue，比如 Angular，比如 React Native。...特别是在一些需要高频交互的场景中，例如拖拽等表现不是很理想。新的通信方式 JSI 的出现解决了通信成本高的问题。...我昨天花了一点时间，成功的在 React Native 中集成了 tailwindcss。...集成 tailwindcss 之后，有一个巨大的好处，就是我可以在所有类型的项目中，获得完全一致的开发体验。等我在此基础之上封装一套通用基础组件库，那我的开发就会变得比以往更加简单。

1.1K2 0

近来一些互联网公司在裁人，很不幸我也被裁了，作为35岁的老it人该怎么破，真是很迷茫？

从去年开始互联网公司裁员之风就开始了，从最近网易爆出的离职员工事件，都证明了国内互联网公司的洗牌在加剧，因为职业的因素已经在技术领域干了十几年了，曾经因为对互联网企业感兴趣在里面呆了有三年的时间，对于互联网公司有了一个初步的了解...能够在互联网企业能够做的比较顺的人员需要具备两个条件：能够跟得上高强度的加班；能够及时更新上技术的变化。...从事软件开发十几年经历过2次大的裁员状态，有一种裁员是避免不了的，整个业务部门被裁撤掉；另外一种裁员是公司销售能力下降，整体的利润下降非常厉害就需要裁掉一些非必要的人员，这个时候裁员的重点就是衡量能力，...能力差一些的可能就此被拿下了，题目说的35岁被裁掉很可能是这种原因，大自然无论是人还是事物都存在优胜劣汰的自身竞争力跟不上行业发展就会存在这种现象。...，技术生涯需要有大的规划，如果想在互联网行业立足需要对这个行业有着深刻的认识，如果觉得适应不了可以在传统的软件行业做规划，希望能帮到你。

1.1K3 0

Tailwind CSS 4.0 发布，提升构建速度

根据 Tailwind 创建者 Adam Wathan 的博文，该插件提供了 “最高的性能和最低的配置”。在该框架新增的 CSS 特性中，有一项是级联层（cascade layers）。...一旦使用 npm（ Node 软件包管理器）安装了 Tailwind——尽管 npm 并非必要，也有一个独立的工具可供使用，在项目中包含 Tailwind 就只需在 CSS 文件中添加以下语句： @import...“tailwindcss”; 将该框架与 Next.js 或 Angular 搭配使用时，通常会使用 PostCSS 插件，与 SvelteKit 或 Astro 搭配使用时会使用 Vite 插件。...建议开发者在使用旧版浏览器时避免使用不支持的功能，而 Internet Explorer 则完全不被支持。虽然提供了升级工具，但也存在一些升级问题。这份完整的升级指南列出了所有破坏性的变更。...关于 Tailwind 优缺点的讨论众说纷纭，其中包括使用无构建步骤的 vanilla CSS 的观点。Wathan 创建 Tailwind 正是因为在大型项目中维护 CSS 文件所面临的挑战。

1K0 0

tailwindcss书写前端样式

公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css...，但是组长要求了，我就照做,于是开始马不停蹄的学习起来tailwindcss了。...对于tailwindcss一开始我的了解只停留在知道名字，现在项目需要，我便开始查询官网文档，学习起来。用了一段时间后，哇，这玩意真丝滑。...700:'#334155', 800:'#1e293b', } }, }, }, plugins: [], }; 此处配置结合了一些项目中的需要...为什么把@apply单独拿出来进行说明呢，主要是因为我们在开发过程中会用到一些重复的样式， 111

7572 0

将 Tailwind CSS 与 React.js 结合的使用指南

在 React.js 项目中无缝集成 Tailwind CSSTailwind CSS 是一个实用为先的 CSS 框架，使开发人员能够快速构建现代且响应式的用户界面。...在本文中，我们将探讨如何将 Tailwind CSS 无缝集成到 React.js 项目中。...先决条件在深入集成过程之前，请确保在您的计算机上已安装 Node.js 和 npm（Node Package Manager）。您可以通过访问 Node.js 并按照安装说明进行安装。...';@import 'tailwindcss/components';@import 'tailwindcss/utilities';步骤 6: 在 React 组件中使用 Tailwind CSS 类现在...这种方法不仅提高了开发速度，还确保了一致且外观引人入胜的用户界面。我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

6.9K4 2

前端LSP真是越来越多了

从Run到Build 「前端框架」的发展是个明显的例子：中世纪作为前端领域第一大框架，jQuery是绝对的运行时方案，他帮助开发者在代码运行时抹平浏览器的差异。...当然，不是这个LSP LSP是编辑器和语言工具（例如linter、静态类型检查、代码风格检查）之间进行通信的标准协议。没有LSP，不同语言需要实现这些工具与不同编辑器的通信。...虽然Hooks在书写上有些规则限制，但是React通过Hooks相关lint很好规避了开发者书写错误Hooks的可能性。...Angular也提供了Angular Language Service[5] TailwindCSS提供了Tailwind CSS IntelliSense 总结这些趋势对于普通业务开发同学来说，意味着...Language Service:https://github.com/angular/vscode-ng-language-service

1.4K4 0

代码美化的艺术

如下图所示：我最开始也是赞成 80 个字符的建议，但是当我遵循这条规范写了近一年的 Angular 代码之后，我发现这条规范有一些缺陷。...首先这条规范是 Python 编码风格的建议，而 Python 的代码是以缩进代表代码块，类、函数等在定义时也没有大括号及小括号，算上括号前的空格，这就比一般的代码少几个字符。...其次现代的编程模式大多是面向对象的风格，类的继承、接口实现等都可能导致代码很长，在 Angular 中可能还会实现多个钩子函数的接口。...另外，Angular 的风格指南建议不要为了精简变量命名而损失易读性，所以很多时候函数命名可能很长，再加上类型系统及链式调用等，单行代码很容易超过 80 个字符，这样就会造成过多的折行。...，过多的折行反而破坏了代码的完整度。

2.2K2 0

tailwind 的生态太强了，连 React Native 都支持

当我得知在 tailwindcss 的生态中，能够支持 React Native 时，我感觉有点激动啊！因为我确实不太喜欢 RN 中样式的语法设计。...由于这种写法，我甚至都不太想开发 React Native 的项目。直到我苦练并熟练掌握了之后 tailwindcss，我才又重新找回了对 React Native 的热情。真是不容易啊！...如何在 RN 项目中集成 tailwindcss NativeWind 是一个维护得比较完善的三方库，我们可以利用它来做到在 React Native 项目中使用 tw..../global.css'; 配置完成之后，我们就可以在 React Native 代码中编写 tailwindcss 中，演示效果如下图所示。然后我啪啪啪一通写，几分钟就快速的完成了如下布局。...这里和 tailwindcss 不太一样的是，NativeWind 提供了一些平台能力，例如，针对同一个属性，我们可以在不同的平台使用不同的颜色 // tailwind.config.js const

3.4K1 0

Vue2 + tailwindcss 初始化

以下是一些常见的选项及其优缺点和注意事项： ESLint with error prevention only: 优点：这个配置只会帮助你防止代码中的错误，它的规则相对宽松。...缺点：由于其严格性，初学者可能需要花费更多时间来解决 ESLint 报告的问题。注意事项：在使用此配置时，请确保你理解并接受 Airbnb 的代码规范。...ESLint + Standard config: 优点：Standard 的配置旨在提供一个相对简单、一致的代码风格，适合那些喜欢“零配置”的开发者。...这可以提高代码可读性，并减少在代码审查过程中关注格式问题的时间。缺点：Prettier 可能会覆盖某些 ESLint 规则，所以需要花一些时间确保配置正确。...选择适当的配置可以帮助你提高代码质量并保持一致的代码风格。

1.2K2 0

代码美化的艺术

我最开始也是赞成 80 个字符的建议，但是当我遵循这条规范写了近一年的 Angular 代码之后，我发现这条规范有一些缺陷。...首先这条规范是 Python 编码风格的建议，而 Python 的代码是以缩进代表代码块，类、函数等在定义时也没有大括号及小括号，算上括号前的空格，这就比一般的代码少几个字符。...其次现代的编程模式大多是面向对象的风格，类的继承、接口实现等都可能导致代码很长，在 Angular 中可能还会实现多个钩子函数的接口。...另外，Angular 的代码风格建议不要为了精简变量命名而损失易读性，所以很多时候函数命名可能很长，再加上类型系统及链式调用等，单行代码很容易超过 80 个字符，这样就会造成过多的折行。...这段代码或许还不是最典型的例子，但是也能看出两者的不同，在实际的业务当中，类似的折行可能更多，而从我个人的角度来看，过多的折行反而破坏了代码的完整度。

2.2K2 0

2020 年的 JavaScript 后起之秀

在前端框架方面，Vue.js、React 和 Angular 一直占据着前三名的位置。出自前端界“轮子哥”Rich Harris 的 Svelte 也在 2020 年收获了 1.2 万的 star。...Alpine.js 借鉴了 Vue.js 和 Angular 的一些思路：自定义 HTML 指令，双向绑定等等。...Angular 在 2020 年发布了三个主要版本。 Angular 9 于 2 月发布。主要变化是移至 Ivy 编译器，该编译器带来了更小的捆绑包大小和许多其他构建改进。...版本 10 和 11 在今年晚些时候问世。 Angular 9 即将发布：改进 Ivy 编译和渲染管道 Angular 10 正式发布，不再支持 IE9/10！...https://blog.tailwindcss.com/tailwindcss-v2 总结 JavaScript 又是辉煌的一年，Best of JS 总结了不同类别下的几款十分出色且受开发者喜爱的工具

2.9K2 0

点击加载更多

分享我在 vue 项目中关于 api 请求的一些实现及项目框架

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

高颜值 tailwindcss 后台模板分享

解锁全栈能力：java程序员的全栈自我革新与ChatGPT的智能协助

Ng-Matero v15 正式发布

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

2022年面向前端开发人员的9个最佳UI组件库框架

苦练七天，魔功大成，我已彻底拿捏 tailwindcss

Angular学习（03）--lint检查规范和WebStorm小技巧

原来 React Native 已经如此成熟了

近来一些互联网公司在裁人，很不幸我也被裁了，作为35岁的老it人该怎么破，真是很迷茫？

Tailwind CSS 4.0 发布，提升构建速度

tailwindcss书写前端样式

将 Tailwind CSS 与 React.js 结合的使用指南

前端LSP真是越来越多了

代码美化的艺术

tailwind 的生态太强了，连 React Native 都支持

Vue2 + tailwindcss 初始化

代码美化的艺术

2020 年的 JavaScript 后起之秀

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐