TailWindCSS入门

上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。

好啦话不多说，开始吧！

常用工具类

1.screens(也可以自定义媒体查询屏幕的宽度)

module.exports = {theme: {screens: {'sm': '640px',// => @media (min-width: 640px) { ... }'md': '768px',// => @media (min-width: 768px) { ... }'lg': '1024px',// => @media (min-width: 1024px) { ... }'xl': '1280px',// => @media (min-width: 1280px) { ... }'2xl': '1536px',// => @media (min-width: 1536px) { ... }}}
}

2.颜色 类名= 使用目标+颜色+权重（可以自定颜色，否则按照默认配置来显示）

module.exports = {theme: {colors: {transparent: 'transparent',current: 'currentColor','white': '#ffffff','purple': '#3f3cbb','midnight': '#121063','metal': '#565584','tahiti': '#3ab7bf','silver': '#ecebff','bubble-gum': '#ff77e9','bermuda': '#78dcca',},},
}

在color.js里面有很多颜色的列举

一般都把颜色作为背景色、文字颜色或者边框颜色。举个

TailWindCSS入门相关推荐

【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
Tailwind CSS 入门和实践
作者:康曾璐背景 Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架,提供了基础的工具类 utility classes(如:内边距 padding.字体 t ...
用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...
【springboot】入门
简介: springBoot是spring团队为了整合spring全家桶中的系列框架做研究出来的一个轻量级框架.随着spring4.0推出而推出,springBoot可以説是J2SEE的一站式解决方案 ...
SpringBoot (一) ：入门篇 Hello World
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...

TailWindCSS入门

常用工具类

TailWindCSS入门相关推荐

最新文章

热门文章