TailwindCss固定NavBar - 腾讯云开发者社区

文章/答案/技术大牛

发布

TailwindCss

分享一个CSS框架，内置了很多css样式： https://www.tailwindcss.cn/ 使用方式： https://www.tailwindcss.cn/docs/installation...注意其不支持IE浏览器仓库地址：https://github.com/tailwindlabs/tailwindcss 甚至你可以直接在Playground中进行尝试： https://play.tailwindcss.com

4201 0

RN实现头部NavBar

（1）实现NavBar import React, {Component, PropTypes} from 'react'; import { AppRegistry, StyleSheet...View, TouchableOpacity, Image, ListView, Dimensions } from 'react-native'; import NavBar...return ( //这里left默认没有 NavBar

2.1K7 0

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

是的

没有找到

TailwindCSS 资源推荐

前言 TailwindCSS 发布了 3.0，功能也越来越好用，那么是否有与之相关的组件库呢？...每个项目都有 awesome ，TailwindCSS 也有 awesome-tailwindcss, 你可以在这里找到插件、工具、组件资源库、以及脚手架和学习资源。...Tailwindcss-forms 表单插件——增加了表单的默认样式，使修改表单样式变得简单。

2.1K2 0

bootstrap源码分析之form、navbar

）源码文件： _navbar.scss 1、主要进行了内部区域的划分，如：head、其他区域；以及导航条位置的定位 2、折叠器实现（在4.0已移除），也就是navbar-collapse类，代替的是...、toggler 4、Navbar-toggler（4.0移除）：设定在屏幕小于breakpoint值时（768）显示，而在4.0则直接用collapse来展示此按钮，没有屏幕大小的限制，navbar-toggle...6、Navbar-fixed-top/bottom：都是定位在上方、下方，有浮动影响 7、Navbar-brand：品牌，可以放网页名称、公司Logo等内容 8、Navbar-toggle：用于收缩的单击的图片...float: right; margin-right: $navbar-padding-horizontal; padding: 9px 10px; @include navbar-vertical-align...form都为行内元素 11、Navbar-text、navbar-btn：都在默认的基础上做了相就的兼容设置 12、Navbar提供了default、inverse两种主题，各主题下对其各自的部件都做了相应的样式兼容处理

1.4K7 0

tailwindcss 与 daisyUI

tailwindcss 是一款原子化的 css 工具库（框架）,可以无需书写 css 就可以快速构建网页。...tailwindcss 自由度够高，又提供复用封装，在我看来是完美的。...如果使用了 UI 库，又使用 tailwindcss 的基础样式，基础样式由组件提供，一些特殊一点的由 tailwindcss 提供。或者说，大神们使用的场景，不是我理解的场景？...我自己觉得，当用了tailwindcss的时候，没必要因为用了，就不自定义自己的class，我们完全可以用tailwindcss进行一些便利的操作，然后配合自定义class，使得确实是一个标签太多的class...不需要像那些说的，用了tailwindcss就摆脱自定义class。往期有文章《vite 新建 vue3 项目及安装插件笔记》有说了怎么安装 tailwindcss 和使用。

8462 0

tailwindcss书写前端样式

公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css...，但是组长要求了，我就照做,于是开始马不停蹄的学习起来tailwindcss了。...现将tailwindcss的总结整理如下： Tailwind CSS 有什么优点？为什么要使用tailwindcss，人家肯定是有优点。我们才使用的嘛。优点如下：可定制化程度极高。...说了这么多tailwindcss的好处，接下来谈谈tailwindcss如何使用吧 tailwindcss的安装 npm install -D tailwindcss 创建tailwind.config.js...modules: ['@nuxtjs/tailwindcss'], 开始使用经过以上的配置，我们就可以丝滑的使用tailwindcss啦。

7272 0

weui-navbar 导航栏页面切换

效果 html navbar"> navbar__item weui-bar...__item_on" href="#tab1"> 标签一 navbar__item" href="#tab2..."> 标签二 navbar__item" href="#tab3"> 标签三... 内容三 css .weui-navbar...auto;} .weui_tab_bd_item.weui_tab_bd_item_active{display:block;} js $(function(){ $('.weui-navbar

2.5K3 0

Unknown at rule @tailwindcss(unknownAtRules)

Unknown at rule @tailwindcss(unknownAtRules) 截图如下：解决 ---- 原因是css 不知道这条规则提示，如果没有提示警告。

2K2 0

上手体验TailwindCSS

postcss@latest autoprefixer@latest 生成 tailwind 和 postcss 配置文件： npx tailwindcss init -p tailwindcss 3.../base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 全局样式文件在main.ts中导入： import...-- 移动端优先设置：固定高度、100%宽度、原比例裁剪、顶部圆角 --> 固定宽度、取消顶部圆角、设置左边圆角 --> <img class="h-48 w-full object-cover md:h-full...确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的，TailwindCSS

2.9K2 0

vite入如何引入Tailwindcss

简介 tailwindcss[1]是一个CSS框架。...npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p 这里我们安装最新版本..."tailwindcss/components"; @import "tailwindcss/utilities"; 最后，我们在入口main.js中引入css： // tailwindcss import...'/@/style/index.css'; 至此，我们就成功的引入了tailwindcss。...: https://tailwindcss.com/

2.6K2 0

手把手教你！全栈Blog应用实战：从零搭建到本地部署

一、所需技术栈介绍及模块划分前端:HTML5, CSS3, 原生JavaScript (ES6+)Axios (用于与后端通信)http-server (用于本地开发)Vite + TailwindCSS...init -p2.配置TailwindCSS (tailwind.config.js)/** @type {import('tailwindcss').Config} */export default...React from 'react';import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Navbar.../components/Navbar';import Home from './pages/Home';import Register from '..../pages/Dashboard';const App: React.FC = () => { return ( Navbar />

2830 0

tailwindcss 高级思维模型

我们可以很明显的发现这种变化规律，因为 tailwindcss 最开始并不支持这样的写法，但是现在支持了。...这样的想法让许多道友无法 get 到 tailwindcss 的优点。...✓好消息是下一个大版本 tailwindcss 4 简化了自定义 class 的配置，它更接近于直接在 css 文件中写样式，而不是在一个工程化的配置文件中写插件因此，我们需要把 tailwindcss...得益于鸿蒙开发在布局上的启发，我基于 tailwindcss 封装了一套比较完整的容器组件。...✓关于这个观点，你可以通过这篇文章了解我的想法和感受 tailwindcss 在基础能力上，比较欠缺的是语义化的表现能力。

4561 0

tailwindcss真的好用吗？

写在前面今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss...差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是什么，今天就实现一个非常简单的登录页面，大概效果如下...：下面我们分别使用三种方式实现，原生css，预编译器scss，和 tailwindcss 最后我会说一下我对tailwindcss的一些看法使用原生实现 tailwindcss其实改变了我们写css的习惯，本质就已经改变了，他提供了大量的简写形式给到我们，想快速的掌握这门css的技术，需要我们自己的css基本功，但是网上我也看了很多对tailwindcss...tailwindcss推荐指数 ※※※ 三颗星

1.5K1 0

tailwindcss 从0到1

500 rounded-full'> $28.00 安装安装依赖 // vue vite npm install tailwindcss...@latest postcss@latest autoprefixer@latest 生成配置文件 npx tailwindcss init 引入样式文件 // 模式1: 通过css文件按需引入 //.../index.css' // 模式2: CND // index.html tailwindcss@^2/dist/tailwind.min.css..." rel="stylesheet"> // 模式3: 全引入 import "tailwindcss/tailwind.css" 功能个人总结 tailwind css 功能主要包括三部分：预设样式类...16px', '4': '24px', '5': '32px', '6': '48px', } }, 插件 const plugin = require('tailwindcss

1.9K2 0

Bootstrap学习（1.1）A：navbar导航简单理解

简单理解因为自己前端不熟悉，特别是Bootstrap，也只是学习阶段自己调试，简单记录一些过程头部缩进也就是在中的 navbar-header...---- 头部缩进（简单了解）去掉 navbar-header 简单先屏蔽掉中的 navbar-header"> 我们看一下效果...也就是，缩进后，没有对应的内容显示了 ---- 头部缩进（简单了解）修改 navbar-header 根据上面的结论，我们知道这块，就是缩进后，显示的 div 一个是Button.../bootstrap-navbar.html （这里只是对应参考的一部分，所以只需要看前面一点即可）根据现在的例子，大体可以总结一下： .navbar-header为左上角Logo文字，有助于增加访问...给导航栏添加链接，只需要简单地添加.nav、.navbar-nav 的无序列表即可响应式导航栏带一个 .navbar-toggle 以及两个 data- 元素的按钮第一个是 data-toggle

1.4K4 0

一文搞懂css、scss、tailwindcss区别

Scss、Tailwindcss区别「SCSS（Sassy CSS）:」语法接近 CSS： SCSS 使用类似于标准 CSS 的语法，使用大括号和分号，这使得它更易学习和迁移现有的 CSS 代码。

3.4K2 0

Vue3引入tailwindcss

引入tailwindcss中文文档tailwind.docs.73zls.com/docs/installation安装 Tailwind 以及其它依赖项npm install tailwindcss@...latest postcss@latest autoprefixer@latest创建配置文件生成tailwind.config.js 和 postcss.config.js 文件npx tailwindcss

1.2K1 0

tailwindcss：弟弟们都往后稍稍

tailwindcss 最近使用tailwindcss，感觉上手体验很不错，虽然刚开始需要一直查文档，但我仍然觉得未来可期。...tailwindcss有很多的优点，工具类优先，响应式设计，组件友好，高度自定义等。...tailwindcss虽然需要前期频繁查文档，记住各种样式也是费时费力，但我依然觉得未来可期。「文档友好」。...在生产环境，tailwindcss会自动删除所有未使用的css，尽可能的使css代码更小。 ? css代码压缩「媒体查询」。...tailwindcss配置文件tailwind.config.js可以添加自定义的配置项。

1.9K4 0

开源推荐！Nextjs开发的适配多终端的精美购物平台

这款电商平台基于 Nextjs 开发, 同时适配了 Desktop、Tablet、Phone等多种设备，目前github star 超过1000+，技术栈如下： NextJs TailwindCss...项目细节演示移动端效果：商品详情：购物车：订单列表：管理端部分界面演示：项目结构 + 技术功能亮点用户端：登录 JWT认证注册首页（分类navBar、banner...、slider、特价板块、hot板块、畅销板块）搜索二级分类页（分类navBar、banner、slider、特价板块、hot板块、畅销板块）三级分类页（排序、筛选）商品详情（购物车）购物车页

9881 0

高颜值 tailwindcss 后台模板分享

这个免费的 tailwindCSS 模板带有预构建的示例，因此开发过程是无缝的，从原型页面切换到真实网站非常容易完成。它的每个元素都有颜色、样式、悬停、焦点的多种状态，您都可以轻松访问和使用。...这个免费的 tailwindCSS 模板带有预构建的示例，因此开发过程是无缝的，从原型页面切换到真实网站非常容易完成。...如果你喜欢明亮清新的颜色，你会喜欢这个免费的 tailwindCSS 模板！它具有大量的组件，可以帮助您创建令人惊叹的网站。

4K3 0

点击加载更多

TailwindCss

RN实现头部NavBar

TailwindCSS 资源推荐

bootstrap源码分析之form、navbar

tailwindcss 与 daisyUI

tailwindcss书写前端样式

weui-navbar 导航栏页面切换

Unknown at rule @tailwindcss(unknownAtRules)

上手体验TailwindCSS

vite入如何引入Tailwindcss

手把手教你！全栈Blog应用实战：从零搭建到本地部署

tailwindcss 高级思维模型

tailwindcss真的好用吗？

tailwindcss 从0到1

Bootstrap学习（1.1）A：navbar导航简单理解

一文搞懂css、scss、tailwindcss区别

Vue3引入tailwindcss

tailwindcss：弟弟们都往后稍稍

开源推荐！Nextjs开发的适配多终端的精美购物平台

高颜值 tailwindcss 后台模板分享

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐