通过 CDN 来使用 Tailwind

最新推荐文章于 2024-05-28 09:45:53 发布
最新推荐文章于 2024-05-28 09:45:53 发布
阅读量1.9k 收藏 1
点赞数 1
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45278200/article/details/121805737
版权

我发现网上大多数关于Tailwind的介绍都是通过NPM安装使用，可能对于只是想看看Tailwind样式的同学有些麻烦，其实官网也说明了通过CDN引用的方式，同时提示了相关注意事项。

以下摘自Tailwind官网

在使用 CDN 之前，请注意，如果没有将 Tailwind 集成到你的构建过程中，那么许多使 Tailwind CSS 强大的功能将不可用。

  • 无法自定义 Tailwind 默认主题
  • 不能使用任何 指令， 如： @apply， @variants 等等
  • 无法启用更多的变体，如： group-focus
  • 无法下载第三方的插件
  • 您法 tree-shake 未使用到的 Styles
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
CHNHUOCHENG
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tailwindcss 入门
qq_29145339的博客
05-29 440
是什么？ Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。就是记住原子类，不要再自己想 CSS 命名一股脑子写 HTMl 就行了！ 它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。在 Bootstrap 中创建一个按钮： <button type="but...
01 【TailWind CSS 安装使用】
DSelegent的博客
08-16 1458
01 【TailWind CSS 安装使用】
Tailwindcss-Injector:Firefox插件，用于从CDN注入Tailwindcss类
05-12
尾风注射器 在Firefox上，单击地址栏上的图标。 文档标题将更改为“ Tailwindcss Injected”，持续2秒钟以进行确认。 然后使用Firefox Dev Tools添加类。
vue-tailwindcss-cdn:Vue 3.x + Tailwind 2.x (cdn) :high_voltage:
05-29
Vue 3.x + Tailwind CSS 2.x （来自 CDN） :high_voltage: 这是一个用于快速原型制作HTML文件，其中包括： Vue 3.x 顺风 CSS 2.x 插件@tailwindcss/forms 插件@tailwindcss/typography 插件@tailwindcss/aspect-ratio 插件@tailwindcss/line-clamp 间变字体 不错的按钮:) 奖金 生产环境的入门模板 具有类似堆栈的（Vue 3.x + Tailwind 2.x + Inter var 字体）
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
weixin_49256908的博客
04-24 358
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
推荐使用 Tailwind JIT CDN：实现动态样式加载的新革命
最新发布
gitblog_00003的博客
05-28 309
推荐使用 Tailwind JIT CDN：实现动态样式加载的新革命 项目地址:https://gitcode.com/beyondcode/tailwindcss-jit-cdn 在前端开发中，高效的样式管理是提升用户体验的关键之一。今天我们要向您推荐一款强大的开源项目——Tailwind JIT CDN，它将Tailwind CSS的Just-In-Time（JIT）编译器与CDN服务完美结合...
Tailwind Link Button
JunChow
05-30 189
链接按钮即将按钮转化为链接的表现形式 link button 链接按钮基础形式 <button class="outline-none mr-1 mb-1 px-3 py-1 bg-transprent text-xs font-bold text-blue-500 uppercase focus:outline-none"> link button </butt...
tailwind-pos:使用tailwind.css和alpine.js构建的销售点应用程序
04-16
尾风POS Tailwind POS是使用和构建的POS（销售点）应用程序。...因此，是的，它通过CDN加载tailwind.css和alpine.js 。 您可以在查看演示。归因可从以下列出的freepik.com帐户下载此应用程序中的样本食物照片：
personal_site:使用Contentful和TailWindCSS在Flask中构建的个人站点
03-27
但是，在这个Flask项目中，我使用了TailWind的CDN来完成样式设置，我确信可以像在NPM中一样完成此操作，但是我只是为了简单起见。 要通过CDN添加TailWind及其版式插件，只需将其添加到页面的开头即可： < link...
Tailwind 布局的集合
06-08
编辑器 tailwind-layouts 使用 Microsoft 的 Monaco Editor（更具体地说，@monaco-editor/react）来查看和编辑组件的代码。 Live Code tailwind-layouts 使用 ESBuild 实时转换和渲染组件。 支持 JSX 和 TypeScript...
tailwind css_Tailwind CSS简介：实用程序优先CSS框架
Web design 教程小屋
07-10 1284
今天，我将向您展示如何开始使用Tailwind CSS，这是一个高度可定制CSS框架，可用于快速构建自己的网页和组件。 它通过提供类列表来起作用，您可以使用这些类来控制页面的每个视觉方面。 视频：Tailwind CSS 在本教程中 这是即将发生的事情的细分。 什么是Tailwind CSS？ 使用CDN版本的简单示例 使用NPM版本的高级功能 自定义Tailwind C...
css: Tailwind CSS一个功能类优先的 CSS 框架
彭世瑜的博客
10-11 618
无需离开您的HTML，即可快速建立现代网站。Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
Tailwind Interactivity
JunChow
06-16 327
CSS交互 元素外观appearance CSS3中appearance属性用于设置元素模仿系统原生控件的外观 appearace: normal | icon | window | button | menu | field 属性值 描述 normal 设置元素外观为常规元素 icon 设置元素外观呈现为图标或小图片 window 设置元素外观呈现为窗口 butto...
tailwindcss构建学习过程
Holly1945的博客
04-26 1172
tailwindcss https://www.tailwindcss.cn/ 静态资源cdn 导入： 无法自定义 Tailwind 默认主题 不能使用任何 指令， 如： @apply， @variants 等等 无法启用更多的变体，如： group-focus 无法下载第三方的插件 您法 tree-shake 未使用到的 Styles Tailwindcss 集成到你的构建过程中 npm i tailwindcss@latest postcss@latest npx tailwindcss init t
Tailwind教程1 - 开始使用
wzy1935的博客
05-27 4482
Tailwind教程1 - 开始使用 Tailwind是一款现代样式框架。本教程旨在循序渐进的教会大家从安装到完全使用tailwindcss搭建页面。我们开始吧！ Tailwind是什么？ tailwind是一个样式库。与UI库不同，它没有封装组件，而是封装css。例如下面的代码会将这个p标签文本设成红色： <p class="text-red-500">hello world!</p> 使用tailwind的时候，只需要给组件添加class即可。比如我们来写一个按钮： <b
基于postCss的TaiWindCss源码解析
yingyangxing的博客
09-15 1164
基于postCss的TaiWindCss源码解析一级目录二级目录三级目录 一级目录 二级目录 三级目录
TailwindCSS 3.0（一）安装方法
Solarains的博客
01-14 2909
在项目目录下初始化项目, 然后安装tailwindcss, 并创建tailwind.config.js文件. # 在项目目录下初始化项目 npm init -y # 安装tailwindcss npm install tailwindcss -D # 创建 tailwind.config.js 文件. npx tailwindcss init 设置tailwind.config.js文件 module.exports = { content: ["./public/**/*.{html,.
TailwindCSS v3.0 正式发布，一大波新特性来袭
m0_61544080的博客
12-20 783
2021 年 12 月 10 日，TailwindCSS 的创始人 Adam Wathan 宣布 TailwindCSS v3.0 正式发布，带来了一系列性能上的改进、对开发工作流的改善以及大量的新特性。 那么这颗在 CSS 工程化领域极为耀眼的新星在 v3.0 为我们带来了那些有趣的新特性呢？我们接下来就来一一的介绍它们。 ## **随时随地的 Just-in-Time 模式** Tailwind 2.x 里面引入了一种新的模式，Just-in-Time 模式，可以保持开发和生产构建是一致的，且都是
通过cdn开发react
05-09
CDN（内容分发网络）是一种加速网站访问速度的技术，它会将你的静态资源（如JavaScript、CSS文件等）缓存到全球各地的服务器上，使得用户从离自己最近的服务器获取资源，从而提高访问速度。 使用CDN来开发React应用程序，可以加快React组件的加载速度，提高应用程序的性能和用户体验。一般来说，你需要将React库和你的应用程序代码上传到CDN服务器，然后在你的HTML文件中引用它们。 以下是使用CDN开发React的步骤： 1. 选择一个React CDN，例如unpkg或jsDelivr。 2. 在你的HTML文件中引用React和React DOM库： ```html <script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script> ``` 3. 在你的HTML文件中引用你的React应用程序代码： ```html <script src="path/to/your/app.js"></script> ``` 4. 开始开发你的React应用程序，使用React和ReactDOM库。 需要注意的是，使用CDN来开发React应用程序需要你具备一定的前端开发经验，因为你需要手动管理你的依赖关系和构建过程。如果你不想手动管理这些细节，你可以考虑使用工具如Create React App来快速构建React应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值