面试 - tailwind css样式库的使用

最新推荐文章于 2024-05-22 11:10:48 发布
最新推荐文章于 2024-05-22 11:10:48 发布
阅读量1k 收藏
点赞数
分类专栏： 面试知识网 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiannverhaha/article/details/127326506
版权
简介

集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
tailwind 能够快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式

举例

在index.html的div标签上使用了flex这个类名，tailwind编译之后会生成flex的样式并将内容输出到output.css文件中

// index.html
<div class="flex">hello world</div>
​
// output.css
.flex {
   
    display: flex
最低0.47元/天 解锁文章
ToBeStronger 66
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的命令即可为您的项目构建Tailwind CSS文件（使用JIT编译和监视）-JavaScript开发
05-26
一个为您的项目构建Tailwind CSS文件的简单命令（通过JIT编译和监视）:recycling_symbol:tailbuild一个为您的项目构建JIT Tailwind CSS文件的简单命令，无需大惊小怪。 运行以下命令，您就可以启动了！ npx tailbuild [输出文件] --files = [用于搜索CSS类并从中生成Tailwind的文件]这是一个特定的示例，其中tailbuild将搜索Tailwind类的public /目录中的所有HTML文件并构建一个自定义CSS文件： dist / tailwind.css npx tailbuild dist / tailwind.css --files =“ ./ public / ** / *。html”文件监视
tailwindcss的样式
weixin_53777282的博客
05-10 1116
这些工具类覆盖了多种常见的样式需求，包括布局、间距、颜色、字体、边框、阴影、尺寸、响应式设计等。还可以在 Tailwind CSS 的配置文件（tailwind.config.js）中自定义尺寸关键词，以适应你的设计需求。在这个例子中，文本的字体大小在小屏幕上是 text-sm，在中等屏幕上是 text-lg，在大屏幕上是 text-xl。在这个例子中，该元素在小屏幕上有边框，在中等屏幕上是虚线边框，在大屏幕上没有边框。在这个例子中，laptop 是我们自定义的中等屏幕断点。然后在HTML中使用。
TailwindCSS的使用，看这一篇就够了！
最新发布
亿点点的博客
05-22 447
TailwindCSS的使用，看这一篇就够了！
CSS库 Tailwind
Dominic_W的博客
01-19 2314
2021年的最后一段时间，还剩最后一周差不多就要放假了。 今年一直在做的一个项目已经在元旦前后结项，无所事事几天之后，部门老大突发奇想：我们用最后一周的时间来更新一下公司的官网吧。 就这样，周一上午，老大兴致勃勃的给介绍了一下tailwindcss，并扬言让我等边学边做，用一周的时间完成公司官网的所有页面的更新。 今天一整天都在使用tailwind CSS编码，对于第一次接触到这种开发方式的我来说其实有一点不习惯，满屏的div和类名看的我头晕眼花，思来想去，还是应该再系统的学习一下。 先贴上两个tailwi
Tailwind教程2 - 基础样式
wzy1935的博客
05-27 2993
Tailwind教程2 - 基础样式 这节讲一讲日常经常使用的基础样式，来实现一个文件夹的样式的标签页： 基础模板如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn
Tailwind Input
JunChow
05-30 728
基础输入框 无边框 无边框输入框主要使用了shadow阴影，适合在有底色的环境中使用。 无边框 <input type="text" class="relative outline-none rounded px-2 py-1 w-full bg-white shadow text-sm text-gray-700 placeholder-gray-400 focus:outli...
with-tailwindcss
04-06
它为Tailwind CSS使用了新的引擎。自己部署使用部署示例：如何使用使用或执行以引导示例： npx create-next-app --example with-tailwindcss with-tailwindcss-app# oryarn create next-app --example with-...
react-native-tailwindcss：基于TailwindCSS的react-native样式系统
02-05
react-native-tailwindcss 基于React式样式系统 轻松应用样式以的方式React本地组件。 实用程序类将转换为有效的对象名称，... 使用您熟悉和喜欢的tailwind.config.js文件自定义样式或仅使用默认的tailwind样式。 在本
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
taro-plugin-tailwind:Taro接收tailwindcss插件
03-15
安装在Tar​​o项目根目录下安装$ npm i taro-plugin-tailwind --save-dev$ # 或使用 yarn$ yarn add -D taro-plugin-tailwind使用约会插件请确保Taro CLI已升级到Taro 3的最新版本，确保taro-plugin-tailwind版本在...
gulp-with-tailwindcss：带有TailwindCSS入门套件的Gulp
02-03
咕嘟咕嘟与TailwindCSS入门套件-回购协议，让您的开发变得更容易使用预定义一饮而尽任务，帮助您使用简单NPM命令 用法 安装开发依赖 npm install 开始开发和服务器进行实时预览 npm run dev 为生产服务器生成缩略...
初学-tailwindcss
qq_45955832的博客
03-17 452
tailwindcss 无需离开您的HTML，即可快速建立现代网站。 Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。 开始使用 确保你安装了 node $ npm install tailwindcss 简单使用 在 vscode 新建一个项目 npx tailwindcss init 会得到 tai
CSS中面试题个人理解
xinshoudandan的博客
06-07 426
1:常见页面布局设置表格布局display:table 2.CSS预处理器和后处理器 当一门语言的能力不足而用户的运行环境又不支持其他选择的时候，这门语言就会沦为"编译目标"语言。 开发者将选择另一门更高级的语言(功能更多)来进行开发，然后编译到底层语言以便实际运行。CSS预处理器包含一套自定义的语法(为CSS增加一些编程的特性，例如原生CSS不具备或者不完善的功能) 及一个解析器，用户根据这些语法定义自己的样式规则。这些规则最终...
01 【TailWind CSS 安装使用】
DSelegent的博客
08-16 1465
01 【TailWind CSS 安装使用】
[超详细]Vue学习笔记：手把手教你配置Tailwind
wuovo233的博客
05-31 6220
为了防止忘记，记录一下vue配置Tailwind这个css框架的过程包括配置中遇到报错的debug。Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如flex,pt-4,text-center和rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
如何在vue项目开发中使用tailwindcss样式
weixin_45932157的博客
06-20 720
在src文件夹下的asset静态资源文件夹中创建一个css样式文件夹，然后在该css文件夹下创建一个tailwind.css文件，并在文件中写入如下代码。使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式。在项目的根文件夹下创建一个postcss.config.js文件，并写入如下内容。将tailwind.css文件引入到main.js文件中。创建postcss.config.js文件。在控制台运行如下指令。
《CSS》前端面试题
微光的博客
04-17 1372
css相关面试题
css利用flex实现瀑布流效果
weixin_44151448的博客
08-31 1444
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流效果</title> <style> /*去除原有的外边框和内边距*/
TailWindCSS入门
cccdf_jjj的博客
06-15 6092
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
taro-plugin-tailwind
07-14
taro-plugin-tailwind的作用就是将这两者有机地结合在一起，让开发者在使用Taro开发项目时能够直接使用Tailwind CSS提供的各种样式类，从而节省编写繁琐CSS样式的时间。 使用taro-plugin-tailwind，我们只需要在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值