In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to ge…

tailwind的特色(在Bootstrap 和vanilla Css之间) https://tailwindcss.com/docs/what-is-tailwind/ Rails6 six版本的Rails使用rails new xxx后会生成: postcss.config.js tailwind 安装tailwind #使用yarn info tailwindcss查看版本 #当下一个版本发布后,会抓这个版本 yarn add tailwindcss@next 也可以在npmjs.com/…

一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生在上个世纪90年代,微软发布了IE浏览器,和网景公司的Netscape Navigator大打出手,1998年网景不得不将公司卖给AOL.没有了对手的IE不思进取,W3C标准支持发展缓慢,为以后的IE兼容性灾难埋下了伏笔.到2004年,IE的市场份额达到95%,但在此之后IE的份额逐步遭其他浏览器蚕…

You are able to extend the custom css with hover, focus, group-hover, responsive variants class in tailwind. https://tailwindcss.com/docs/functions-and-directives/#variants <section> <div> <h2 class="banana hover:chocolate"> so…

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs. Update gulpfile.js: const gulp = require("gulp"); const postcss…

This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library for building out your styles. Poi supports PostCSS out of the box, but to show the true power of PostCSS, you need leverage PostCSS plugins which requir…

Tailwind CSS in Action Tailwind CSS是一个高度可定制的低级CSS框架,它为您提供了构建定制设计所需的所有构造块,而无需烦恼要覆盖的烦人的自以为是的样式 https://tailwindcss.com/ https://github.com/tailwindlabs/tailwindcss CSS framework $ yarn add tailwindcss # OR $ npm i tailwindcss refs xgqfrms 2012-2020 www…

前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用功能类优先 在上一章中我们的 react 组件有了一个简单的样式,在这一篇我们将使用 tailwindcss 来重新编写它的样式.我将使用我们上一章的代码为例子. Tailwind CSS 前置知识 不要害怕功能类优先的写法,总体来说它其实和我们传统的 CSS 写法没有什么不同,如果你会写 CSS,…

When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks El…

In this lesson, we learn how to control what utility classes are generated for each utility class module. We look at how we can “opt-in” for responsive variations, as well as different states like hover and focus. In tailwind.js: you need to add: mod…

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media queries in the config file. You can add more breakpo…

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered. <p class="mb-4"> I am a <a class="text-purple hover:text-orange focus:bg-yellow" href="#">t…

一. 查看性能分析报告 npm run build:prod --report ​ 二.vue ui工具 ​ ​ 三.vue-element-admin https://panjiachen.gitee.io/vue-element-admin-site/zh/ ​ 四.矢量图库 http://iconfont.cn ​ 五.Electron Build cross platform desktop apps with JavaScript, HTML, and CSS. https://ele…

Bootstrap https://getbootstrap.com/BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup. https://bootstrap-vue.js.org h…

项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看,避免踩坑. 后来觉得项目比较简单,tailwind对新上项目小伙伴确实不太友好,所以我们最终没有采用. 简介 GitHub - vadimdemedes/tailwind-rn: Use Tailwind CSS in React Native projects Tailwind 提倡了原子型的CS…

前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind 来写样式,以后我代码里的样式都会使用 tailwind 来写. 这一章,我将给我们的子组件加一个按钮,以实现交互的功能. 什么功能? 我们现在的子组件如下图: 现在它没有交互功能,我想给他的灰色按钮加一个点击事件,点击后将内容收起,如下: 实现 首先,我们的灰色按钮,现在只是一个 span 元素,…

Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/snack-helper 前言 什么是 helper ?任何框架都不是万能的,而业务需求却是多种多样,很多时候我们只需要更改组件的部分属性,而 helper 就是调整细节的工具.我在之前的文章<如何编写轻量级 CSS 框架>中也举过例子,我们完全没必要因为几个属性的不同而重新编写新组件.大部分的 helper 都是一个类对应一个 CSS 属性,…

SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间,解决SPA不利于SEO(Search Engine Optimization)的优化. 那Nuxt是什么呢?跟SSR有什么关系呢? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的…

How To Be Successful http://blog.samaltman.com/how-to-be-successful 总结一下文章的重点: 1. Compound yourself2. Have almost too much self-belief3. Learn to think independently4. Get good at “sales”5. Make it easy to take risks6. Focus7. Work hard8. Be bold9. B…

Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架. 每个Tailwind小应用都有多种尺寸,这使得创建响应式界面变得非常简单. 您可以自定义颜色,边框尺寸,字体,阴影等等,没有任何限制. Pretty Checkbox 这是一个纯CSS库,用于创建漂亮的复选框和单选按钮. 它提供了不同的形状(正方形,曲线,圆形),选择方式(默认,填充,thick),颜色(主要,成功,信息),颜色类型(实心,轮廓)和动画. 它支持自定义字体图标,SVG图标和SCSS自定义. Bu…

实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 W3C中国 W3C国内镜像 HTML5 - MDN JavaScript - MDN ECMAScript规范 es6使用对照手册 w3school 菜鸟教程 现代 Javascript 教程 Javascript备忘录手册 JavaScript参考手册 JavaScript 全局对象 JavaS…

Microsoft Ignite The Tour 是一年一度微软为全球开发者.IT专家.安全专家以及数据专家提供的为期两天,包含众多核心产品的实践性技术培训.2019.12.10-2019.12.11 已经在北京国家会议中心胜利闭幕,我作为一名Speaker 参与了两门课程的分享,但是我发现了一个问题就是参与课程学习的各位并不是按照官方的良好愿望--按照学习路径规划学习内容,就拿我的两个课程都是属于<开发云原生应用程序>,  从参与课程的人数上面是最容易反应这个问题,这个系列有5 个Sess…

官网: https://www.tailwindcss.cn/…

原文链接:https://mail.qq.com/cgi-bin/readtemplate?t=safety&check=false&gourl=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fweb-development-2020%2F&subtemplate=gray&evil=0 前端部分原文+翻译如下(百度翻译,对不顺畅的语序做调整,基本不太需要,百度翻译已经很发达了~),转载请注明出处(本文的链接),谢谢 Web Deve…

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c 现在的网站风格已经与它们很早之前的样子有了很大的不同.如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来.所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息,它们同样也可以拥有有趣的动画.多样的布局和互动…

作者:HelloGitHub-小鱼干 摘要:经济实用,用作上周的 GitHub 热点的横批再合适不过.先不说 GitHub Trending 上不止一个的会员共享项目,免你找好友刷脸要会员,这项目实在太好用.也不说 TIL 利用你碎片化时间学习编程技术的项目,光是本周在 GitHub Trending 占有一席之地全靠实用的初学者实用项--CPlusPlusThings(该项目也被收录在 HelloGitHub 第 47 期月刊)打破 "C++ 不上" Trending 的魔咒,都说明…

兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目.让生活变得更美好的工具.书籍.学习笔记.教程等,这些开源项目大多都是非常容易上手,而且非常 Cool.主要是希望大家能动手用起来,加入到开源社区中. 会编程的可以贡献代码 不会编程的可以反馈使用这些工具中的 Bug 帮着宣传你觉得优秀的项目 Star 项目️ 在浏览.参与这些项目的过程…

先说一下背景,最近做的两个项目一个是祖传angularjs1.X版本另一个是react hooks结合tailwindcss,前者angularjs的node版本比较低,而tailwindcss的node最低得12.13.0,二者node版本需求不同,所以我就只能切换node版本了.而因为我又是window,所以用不了n,就选了nvm. 1.卸载node 对的,你没看错,安装nvm之前一定要先卸载node,并且要卸载干净,不然安装不了或者说安装成功了后发现用不了node,输入 node -v 看…

作者:慕课网链接:https://www.zhihu.com/question/59073695/answer/1071631250来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件.如果你是来自于像 Angular 这样的框架的开发者,你可能已经习惯了框架包含了所需要的所有功能, 然而对于 React…

一. 常见CSS设计模式分析 oocss Object Oriented CSS,面向对象的CSS,旨在编写高可复用.低耦合和高扩展的CSS代码. OOCSS是以面向对象的思想去定义样式,将抽象(结构)和实现(样式)分离,抽离公共代码. 区分结构和样式 在定义一个可重用性的组件库时,我们仅创建基础的结构(html)和基础的类名,不应该创建类似于border, width, height, background等样式规则,这样使组件库更灵活和可扩展性.组件库在不同环境下的样式所要求不一样,若未能区…