Tailwind CSS

Tailwind CSS是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面.

Useful Links

传奇：官方资源

  • Website - 官方 Tailwind CSS 网站.
  • Repository - 官方 Tailwind CSS 存储库.
  • Discussions - 与其他社区成员就 Tailwind 进行联系的官方场所.
  • Tailwind UI - 使用 Tailwind CSS 制作的组件库.
  • Headless UI - 完全没有样式，完全可访问的 UI 组件.
  • Heroicons - 精美的手工 SVG 图标.
  • Play - Tailwind CSS 的高级在线游乐场.
  • Just-in-time - Tailwind CSS 的即时编译器.
  • Tailwind Weekly - 关于 Tailwind CSS 的所有内容的每周时事通讯.
  • Built With Tailwind - 社区驱动的使用 Tailwind CSS 构建的很棒的网站集合.

IDE Extensions

传奇：官方资源

  • IntelliSense for Code - Visual Studio Code 的 IntelliSense 扩展.
  • Styled Snippets for Code - Visual Studio Code 的代码片段扩展.
  • Headwind for Code - Visual Studio Code 的类分类器扩展.
  • Shades for Code - Visual Studio Code 的调色板生成器扩展.
  • IntelliSense for Neovim - Neovim 的 IntelliSense 扩展.
  • Tailwind CSS Explorer for Code - 探索项目 Tailwind CSS 设置中可用的类.
  • Tailwind CSS Highlight - 突出显示 Visual Studio Code 的实用程序扩展.

Plugins

Legend：官方插件·主题·实用程序·变体·组件·已弃用

  • Typography - 为漂亮的排版默认添加了一个“散文”类.
  • Aspect Ratio - 添加可组合的纵横比实用程序.
  • Line Clamp - 提供用于在固定行数后截断文本的实用程序.
  • Forms - 为表单元素添加更好的默认样式.
  • Theming - 使用 CSS 变量进行主题化，支持暗模式.
  • Theme Variants - 添加基于媒体查询和/或 CSS 选择器的主题变体.
  • Multi Theme - 添加基于单个“主题”属性的主题变体.
  • Theme Swapper - 使用 CSS 变量进行主题化，支持媒体查询.
  • Themeable - 为 Tailwind CSS 添加了多个主题支持.
  • Themer - 添加对带有 CSS 变量和变体的 Tailwind CSS 的主题支持.
  • Radix - 添加实用程序和变体以设置 Radix UI 状态的样式.
  • Custom Native - 利用 Tailwind CSS 的配置来允许创建实用程序.
  • Image Rendering - 添加“图像渲染”实用程序.
  • Elevation - 添加 Material UI elevation 公用事业.
  • Writing Mode - 添加“写作模式”实用程序.
  • Hyphens - 添加“连字符”实用程序.
  • Border Gradients - 添加 border-image 渐变实用程序.
  • RFS - 添加 RFS 公用事业.
  • List Reset - Adds back the list-reset class that was removed prior to Tailwind CSS 1.0.
  • Fluid - 添加流体尺寸实用程序.
  • Typography - 添加排版实用程序.
  • Triangle After - 添加 CSS 三角形实用程序.
  • Scrims - 添加稀松布实用程序.
  • Truncate Multiline - 添加实用程序以截断多行文本元素.
  • CSS Logical Properties - 为 CSS 逻辑属性生成实用程序.
  • Tooltip Arrows After - 为带有可配置边框和背景的工具提示箭头添加 CSS 实用程序.
  • Bidirectional - 添加用于创建多语言双向布局的实用程序.
  • Bidirectional - 将核心实用程序替换为双向兼容.
  • Background SVG - 注入 SVG 作为具有颜色变体的背景图像.
  • Background Unsplash - 申请 unsplash.com 图像作为背景.
  • Brand Colors - 为背景、边框和文本添加各种品牌颜色.
  • Bootstrap Grid - 生成 Bootstrap 风格的 flexbox 网格系统.
  • Leading Trim - 添加实用程序来修剪文本空白，使用 Capsize.
  • Scrollbar Hide - 添加 scrollbar-hide 类用于视觉隐藏滚动条.
  • Downwind CSS Easings - 扩展 transition-timing-function 实用程序.
  • Content Placeholder - 为内容占位符图像添加实用程序.
  • No Scrollbar - 公开 scrollbar-none 以在视觉上隐藏滚动条.
  • Fluid Type - 添加流体类型（font-size）实用程序.
  • Grid Areas - 添加 grid-areas 和 grid-area 实用程序.
  • Touch - 添加“触摸”变体.
  • Localized - 添加基于 HTML lang 属性的变体，以仅对某些语言使用实用程序.
  • Padded Radius - 添加匹配嵌套边界半径的变体.
  • Fluid - 生成 fl: 变体.
  • Marker - 为样式列表和提供实用程序<summary> 标记.
  • Pseudo selectors - 为 Tailwind CSS 默认没有的伪类和伪元素添加变体.
  • Container Queries - 添加 CSS 容器查询变体.
  • FormKit - 为 FormKit 添加输入和表单状态的变体.
  • Debug Screens - 添加一个显示当前活动屏幕的组件（响应断点）.
  • Heropatterns - 添加 Hero Patterns 组件.
  • Responsive Embed - 添加一个 responsive-embed 组件.
  • Bootstrap Tables - 基于 Bootstrap 的表格添加表格组件.
  • Card - 添加卡片组件.
  • Skip link - 添加一个 Skip to main content 可访问组件.
  • Colors to CSS Variables - 将颜色配置导出到 CSS 自定义属性.
  • CSS Variables - 将配置导出到 CSS 自定义属性.
  • CSS Variables - 导出自定义 CSS 变量（支持深色模式）.
  • Perspective - 添加“透视”实用程序.

> - 以下插件提供的功能现已在 Tailwind CSS 中完全或部分实现.

  • Caret Color - 添加“插入符号”颜色实用程序.
  • Caret Color - 添加“插入符号”颜色实用程序.
  • benface’s gradients - 添加渐变实用程序.
  • lorisleiva’s gradients - 添加背景渐变实用程序.
  • Visually Hidden - 添加屏幕阅读器实用程序.
  • Object Fit - 添加 object-fit 实用程序.
  • Object Position - 添加“对象位置”实用程序.
  • Accessibility - 添加屏幕阅读器实用程序.
  • Layout - 添加了一些布局实用程序.
  • Grid - 添加 CSS 网格实用程序.
  • Transforms - 添加“转换”实用程序.
  • benface’s transitions - 添加可配置的转换实用程序，有或没有 CSS 变量.
  • webdna’s transitions - 添加可配置的转换实用程序.
  • glhd’s transitions - 添加基本的过渡实用程序.
  • Cursor Extended - 扩展“光标”实用程序.
  • Font Variant Numeric - 添加 font-variant-numeric 实用程序.
  • Filters - 添加“过滤器”实用程序.
  • CSS Filters - 添加带有默认值的 filter 和 backdrop-filter 实用程序.
  • Blend Mode - 添加“混合模式”实用程序.
  • Colorize - 添加“过滤器”实用程序.
  • Scroll Snap - 添加 scroll-snap 实用程序.
  • Scroll Behavior - 添加 scroll-smooth 和 scroll-auto 类来控制平滑滚动.
  • Accent Color - 添加强调色实用程序.
  • Text Indent - Adds text-indent utilities.
  • Text Decoration Color - 添加 text-decoration-color 实用程序.
  • Downwind CSS Text Decoration - 添加可组合的“文本装饰”实用程序.
  • Capitalize first letter - 添加“大写优先”实用程序.
  • Aspect Ratio - 添加“纵横比”实用程序.
  • Shadow Outline Colors - 根据配置的颜色添加 box-shadow 实用程序.
  • Alpha - 添加 alpha 颜色变体实用程序.
  • Direction - 添加“RTL”和“LTR”变体.
  • Important - 添加一个“重要”变体.
  • Prefers Dark Mode - 添加基于 prefers-color-scheme 媒体查询的变体.
  • Dark Mode - 添加基于 CSS 类的“暗”变体.
  • Dark Mode - 添加基于 prefers-color-scheme 媒体查询的 dark 变体.
  • CSS Alpha Colors - 为现有颜色添加不透明度变体.
  • Pseudo - 将自定义变体添加到 Tailwind CSS 的配置中.
  • Spinner - 添加微调器组件.
  • Spaced Items - 添加“间隔”组件，为所有容器项目添加固定边距.
  • Custom Forms - 为表单元素添加更好的默认样式.

Tools

图例：可在线访问·转换或升级工具·生成器·打字/执行·外部服务的插件/工具/扩展·颜色相关·框架

  • Tailwind Color Shades - Tailwind CSS 的颜色阴影生成器.
  • Palette generator - 输出 Tailwind CSS 配置文件的调色板生成器.
  • Tailwind Colors - Tailwind CSS 的颜色配置生成器.
  • Tailwind Color Explorer - Tailwind CSS 的颜色浏览器.
  • TailwindInk - AI 调色板生成器，使用 Tailwind CSS 调色板进行训练.
  • Gradient Designer - 为 Tailwind 2.0+ 生成渐变.
  • Grayscale Design - 基于亮度的调色板生成器.
  • Hypercolor - 带有方向选项的预配置 Tailwind CSS 渐变集合.
  • Palettolithic - 基于一种颜色生成和谐调色板.
  • Tailwind Gradient Generator - 使用零行代码创建完美的 Tailwind CSS 渐变.
  • Ui Colors - Tailwind CSS 的调色板生成器.
  • Tailwind CSS v2 colors - 带有 Tailwind CSS v2 颜色的 Figma 库.
  • Colorkraken - Tailwind CSS 的颜色阴影生成器.
  • babel-plugin-tailwind-dark - 使用 Babel 编译代码时添加自定义暗类的 Babel 插件.
  • Twind - 在运行、服务和构建时将 Tailwind 的类转换为 CSS 的编译器函数.
  • GPT-3 Tailwind CSS code generator - OpenAI GPT-3 驱动的 Tailwind CSS 代码生成器.
  • Stitches - 带有 Tailwind 的模板生成器（在线）.
  • tail-animista - Tailwind CSS 的可配置自定义动画实用程序生成器.
  • brands-tail-color - 使用各种品牌颜色的配置生成器.
  • Windframe - Tailwind CSS 拖放构建器可快速构建和原型网站.
  • Typography Playground - 使用 Tailwind CSS 排版插件尝试不同的 Google 字体组合的工具.
  • Play - Tailwind CSS 的高级在线游乐场.
  • Updrafts.app - Tailwind CSS 的高级在线无代码拖放编辑器.
  • tailwind.run - Tailwind CSS 使用内置功能（在线）.
  • tailzilla.app - Tailwind CSS 的在线游乐场.
  • Flowrift - 设计精美的 Tailwind CSS UI 块.
  • Tailwind Automatic Prefix Applicator - Tailwind 类的前缀工具.
  • CSS to Tailwind CSS Converter - 通过建议最匹配的类将 CSS 转换为 Tailwind CSS.
  • Tailwindo - Bootstrap 到 Tailwind CSS 转换器.
  • Tailupgrade - 用于将 HTML 文件从 Tailwind CSS v0.x 升级到 v1.0 的转换工具.
  • Tailwind Shift - 从 Tailwind CSS v0.7 升级到 v1.0 的升级工具.
  • RustyWind - 用于对 Tailwind CSS 类进行排序的 CLI 工具.
  • Windy - 将 HTML 元素转换为 Tailwind CSS 的浏览器扩展.
  • react-native-tailwindcss - React Native 类型系统.
  • typed-tailwind - Tailwind CSS 的 TypeScript 类型.
  • Gatsby Plugin - Gatsby 的 Tailwind CSS 集成.
  • Gridsome Plugin - Gridsome 的 Tailwind CSS 集成.
  • Alfred Workflow - 快速 Tailwind CSS 文档搜索应用程序.
  • ng-tailwindcss - 用于将 Tailwind CSS 集成到 Angular-CLI 项目中的 CLI 工具.
  • vue-cli-plugin-tailwind - 将 Tailwind CSS 添加到项目中的 Vue CLI 插件.
  • Tailwind CSS Figma Kit - 适用于 Tailwind CSS 的 Figma 套件.
  • Tailwind CSS Figma UI Design Kit - 适用于 Tailwind CSS 的 Figma UI 设计工具包.
  • Tailwind CSS Figma Plugin - 集成 Tailwind CSS 的 Figma 插件.
  • @nuxtjs/tailwindcss - 用于 NuxtJS 的 Tailwind CSS 模块，带有 PurgeCSS 和现代 CSS（预设 env 1）.
  • preact-cli-tailwind - Preact 的 Tailwind CSS 集成.
  • tailwind-classes-sorter - NPM 库，提供对 Tailwind CSS 类进行排序的实用程序.
  • prettier-plugin-tailwind - 对班级列表进行排序的更漂亮的插件.
  • tailwindcss-rails - 将 Tailwind CSS 与 Rails 的资产管道一起使用的 Gem.
  • Zeplin Config & Class generator - 生成 Tailwind 配置的 Zeplin 扩展.
  • @tailwindcssinjs/macro - 将 Tailwind CSS 类转换为 CSS-in-JS 库的对象的 Babel 宏.
  • twin.macro - 在任何 CSS-in-JS 库中使用 Tailwind 类.
  • tailwindcss-webpack-plugin - 开箱即用的 Tailwind CSS，支持“在 Devtools 中设计”模式并可视化 Tailwind CSS 配置.
  • Tailwind Config Viewer - 用于可视化 Tailwind CSS 配置文件的本地 UI 工具.
  • Laravel Form Components - 使用 Tailwind CSS 自定义表单的刀片表单组件.
  • @ngneat/tailwind - Angular 的 Tailwind CSS 集成.
  • Gust - 用于 WordPress 的拖放页面构建器.
  • clb - clb（类列表生成器）是一个实用函数，它基于 Stitches 像 API.
  • Inspect Flow - Tailwind CSS 的完整开发人员工具.
  • twined-components - 样式化组件的扩展组件，它优先考虑在 Tailwind CSS 中使用的类名.
  • re-tailwind - 生成 Tailwind 类的 ReasonML 实用程序.
  • Protoship Codegen - 从 Sketch 设计创建基于 Tailwind CSS 的 HTML 和 CSS 的代码生成器.
  • create-tailwind-plugin - Tailwind CSS 的插件脚手架.
  • Maizzle - 使用 Tailwind CSS 进行快速电子邮件原型设计的框架.
  • Tailwind Cheat Sheet - Tailwind CSS 类名称备忘单.
  • Tailwind Cheat Sheet - Tailwind CSS 类名称在一个文件中.
  • Tailwind Cheat Sheet - Tailwind CSS 类名称、变体和指令备忘单.
  • Tailwind Cheat Sheet - 可搜索页面中的 Tailwind CSS 类名称.
  • Tailwind Cheat Sheet - 可搜索界面中的 Tailwind CSS 实用程序类名称.

UI Libraries, Components & Templates

Legend：官方资源·库·组件·模板

  • Tailwind UI - 使用 Tailwind CSS 制作的组件库.
  • Headless UI - 完全没有样式，完全可访问的 UI 组件.
  • VueTailwind - 使用 Tailwind CSS 的 Vue.js UI 库.
  • Tailwind Elements - 大量免费组件，得益于 Bootstrap 5，移动设备友好.
  • Vechai UI - 使用 Tailwind CSS 的内置深色模式的高质量可访问 React 组件.
  • Flowbite - 使用 Tailwind CSS 构建的开源组件库.
  • a17t - 为扩展 Tailwind CSS 而构建的原子设计工具包.
  • tails-ui - 使用 Tailwind CSS 的 React UI 库.
  • tails - 使用 Tailwind CSS 手工制作的模板和组件.
  • Svelte Headless UI - Headless UI 的非官方 Svelte 端口.
  • TailBlocks - 60 多种可供使用的 Tailwind CSS 块.
  • Tailwind Components - 社区驱动的 Tailwind CSS 组件存储库.
  • Tailwind Toolbox - 模板、组件和资源.
  • Meraki UI Components - 支持 RTL 语言的精美 Tailwind CSS 组件.
  • Tailwind Cards - 越来越多的文本/图像卡集合.
  • Tailwind Templates - 模板和组件的集合.
  • Treact - 使用 Tailwind CSS 构建的 React UI 模板和组件.
  • Jakarta LTE - 使用 Tailwind CSS 的管理模板.
  • themes.dev - 手工制作、免费和优质的 Tailwind CSS 主题和组件.
  • Kutty - Web 应用程序中常用的可访问和可重用组件.
  • Sail UI - 基于 Tailwind CSS 构建的基本 UI 组件的集合.
  • jQuery Toggler - 使用 jQuery 和 Tailwind CSS 切换.
  • Tailwind Kit - 与框架无关的、Vue.js、React 和 Angular 组件.
  • lofi ui - 低保真 Tailwind CSS 组件.
  • Gust UI - 用于 React 和 HTML 中的 Web 应用程序的时尚 Tailwind CSS 组件.
  • Windstrap - 带有 Bootstrap JS 的 Tailwind CSS.
  • WickedBlocks - 使用 Tailwind CSS 构建的 120 多个布局块和组件的集合.
  • Daisy UI - Tailwind CSS 的 UI 组件.
  • Kometa UI Kit - 使用 Tailwind CSS 构建的免费多用途 UI 套件.
  • Mamba UI - 免费的 Tailwind CSS 组件、部分和模板.
  • Litepie Date picker - Vue.js 和 Tailwind CSS 的日期范围选择器组件.
  • Tailwind Datepicker - 添加一个使用 Tailwind CSS 和 vanilla JavaScript 构建的日期选择器组件.
  • Tailwind Typeahead - 使用 Vue.js 和 Tailwind CSS 构建的 Typeahead/Autocomplete 组件.
  • Material Tailwind - 易于使用的 Tailwind CSS 和 Material Design 组件库.
  • Layouts for Tailwind - Tailwind CSS 的布局和 UI 模式.
  • HyperUI - 开源营销和电子商务 Tailwind CSS 组件.
  • Snippets - 为 Tailwind CSS 制作的开源动画片段集合.
  • Fancy Tailwind - 大量 Tailwind CSS UI 组件 (700+).
  • Myna UI - 使用 Tailwind CSS 制作的开源 UI 组件和营销元素.
  • Vue Notus - 开源 Tailwind CSS 和 Vue.js UI 套件.
  • Red Pixel Themes - 使用 Tailwind CSS 制作的对开发人员友好的付费模板.
  • EasyTailwind - 使用 Tailwind CSS 制作的免费增值模板，可轻松自定义.
  • Windmill Dashboard - 多主题、完全可访问的仪表板模板.
  • Tailwind Admin - 带有 Tailwind CSS 的管理面板模板.
  • Landing Gradients - 使用渐变的登陆页面模板（1.7+）.
  • Resume - 使用 Tailwind CSS 的简单简历.
  • Resume - 使用 Tailwind CSS 构建的风格化简历模板，具有漂亮的英雄图案背景和自定义字体.
  • Simple Light - 使用 React 和 Tailwind CSS 构建的免费登陆页面模板.
  • V-Dashboard - 使用 Vue 3 和 Tailwind CSS 构建的仪表板起始模板.
  • Petra - 使用 Nuxt.js 和 Tailwind CSS 构建的免费登陆页面模板.
  • Tailmin - 使用 Vue.js 和 Tailwind CSS 构建的管理仪表板.
  • OhMySMTP Templates - 使用 Maizzle 构建的事务性 HTML 电子邮件模板集
  • Material Tailwind Kit React - 免费的 Tailwind CSS 和 React UI 工具包.
  • Material Tailwind Dashboard React - 免费的 Tailwind CSS 和 React 管理模板.
  • Admin One Vue 3 - 免费的 Vue.js 3 Tailwind CSS 管理模板，支持 Vite 和 Vue CLI.
  • Cruip - 设计精美的 HTML、React 和 Vue.js 模板.

Starters & Themes

Legend：包·命令行工具/生成器·可克隆

  • Create React App with PurgeCSS - 添加 Tailwind CSS 和 PurgeCSS 的 CRA 脚本.
  • Laravel Preset - 将 Tailwind CSS 添加到 Laravel 框架.
  • Laravel Front-end Preset - 使用 Tailwind CSS for Laravel 的前端预设.
  • Laravel Dark Front-end Preset - 使用 Tailwind CSS for Laravel 的深色主题前端预设.
  • Create React App with EmotionJS - 使用 Tailwind CSS 和 Emotion JS 的 CRA 样板.
  • Create React App with TypeScript - 支持 Tailwind CSS 和 TypeScript 的 CRA 模板.
  • Next.js PWA – 生成 Next.js PWA 的样板代码以及 Tailwind CSS 集成的 CLI.
  • new-tailwind-app - 创建 React.js、Next.js、Gatsby.js、Vue3、Laravel 和基本的 Tailwind CSS 应用程序.
  • Tailwind CSS Boilerplate - 使用 Parcel 的 Tailwind CSS 样板.
  • Jekyll Starter - 使用 Tailwind CSS 的 Jekyll 启动器.
  • Jekyll Starter - 使用 Tailwind CSS 的 Jekyll 启动器.
  • Jekyll Starter - 使用 Tailwind CSS 的 Jekyll 启动器
  • Gulp Starter - 使用 Tailwind CSS 的 Gulp 启动器.
  • Gatsby Starter - 使用 Tailwind CSS 的 Gatsby 启动器.
  • Gatsby Starter Simplicity - 使用 Tailwind CSS 的 Gatsby 启动器.
  • Gatsby Starter + TypeScript - 使用 Tailwind CSS 和 TypeScript 的 Gatsby 启动器.
  • Gatsby Starter + Emotion JS - 使用 Tailwind CSS 和 Emotion JS 的 Gatsby 启动器.
  • Gatsby Starter Opinionated - Gatsby starter 使用 Tailwind CSS 和自以为是的好东西.
  • Create React App Boilerplate - 使用 Tailwind CSS 的 CRA 样板.
  • Create React App with PurgeCSS + Autoprefixer + CSSNano - 使用 CSS Nano 的 CRA 样板.
  • Dogpatch - 使用 Webpack、Vue、Babel 和 Tailwind CSS 的 WordPress 启动器.
  • Next.js Starter - 使用 Tailwind CSS 的 Next.js 样板.
  • Sapper & Svelte Starter - 使用 Sapper、Tailwind CSS、Purge CSS、Prettier 和 ESLint 的 Svelte 样板.
  • Netlify Lambda Starter - 使用 Tailwind CSS 的 Netlify Lambda 样板.
  • Hugo Theme Starter with Tailwind CSS - 使用 Tailwind CSS 的 Hugo 主题启动器.
  • Eleventy Web Starter - 使用 Eleventy、Tailwind CSS、Webpack 和 PostCSS 的入门工具包.
  • Nanoc Starter - 使用 Tailwind CSS 的 Nanoc 启动器.
  • PostCSS and Browsersync Boilerplate - 使用 CSS Nano 的样板.
  • ParcelJS + TypeScript Boilerplate - 使用 Tailwind CSS、ParcelJS 捆绑器和 TypeScript 的样板.
  • VuePress Tailwind CSS Starter - 使用 Tailwind CSS 的 VuePress 启动器.
  • Gatsby Serif - 使用 Tailwind CSS 的 Gatsby 的衬线主题.
  • Seminyak Hugo Theme - 使用 Tailwind CSS 的 Hugo 主题.
  • Eleventy Starter - 使用 Tailwind CSS 的生产就绪、对 SEO 友好的博客启动器.
  • Vite + React + Tailwind Starter - 使用 Vite、React 和 Tailwind CSS 的样板.
  • Vite + React + TypeScript + Tailwind 3.x starter - Vite、React + Tailwind 3.x + TypeScript 的 GitHub 模板.
  • Vite + Vue 3.x + Tailwind 2.x Starter - 使用 Vite、Vue、Vue Router 和 Tailwind CSS 的入门模板.
  • Shopify Theme Lab - 使用 Vue 和 Tailwind CSS 的 Shopify 主题开发入门.
  • Starter Dashboard Layout - 使用 Tailwind CSS 和 Alpine JS 的仪表板布局.
  • Jekyll Landing Website Starter - 使用 Jekyll 和 Tailwind CSS 的生产就绪、SEO 友好、高性能登陆网站样板.
  • Next JS Boilerplate - Next.js 和 Tailwind CSS 的样板.
  • Vitailse - 带有 Vue 3、TypeScript 和 Tailwind CSS 的 Opinionated Vite 入门模板.
  • Vite-Boot - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse 模板.

Open-Source Projects

  • Goodwork - 项目管理和协作工具.
  • Statusfy - 使用 Tailwind CSS 的状态页面系统.
  • Todolist - 使用 Tailwind CSS 的待办事项列表应用程序.
  • LeagueStats - 英雄联盟玩家统计网站.
  • SapperCommerce - 使用 Svelte 和 Tailwind CSS 的电子商务店面.
  • Misiki Books - 使用 Vue + Moltin + Tailwind CSS 的书店.
  • Ubuntu 20.04 - 使用 React.js + Tailwind CSS 的 Ubuntu 桌面.
  • Angular Spotify - 使用 Angular、Nx Workspace 和 Tailwind CSS 构建的 Spotify 客户端.
  • GitProfile - 基于 GitHub 配置文件的自动投资组合构建器，使用 React.js 和 Tailwind CSS 构建.

Learning

Legend：官方资源·示例·设置教程·视频教程·组件或页面教程·演员表

  • Plugin Examples - 官方插件示例.
  • Tailwind Dark Mode Theme Switcher - 使用 CSS 自定义属性和 Tailwind CSS 切换主题.
  • Acquia - Acquia 的托管仪表板使用 Vue.js 和 Tailwind CSS 重建.
  • Navbar - 使用 Vue.js 和 Tailwind CSS 制作的导航栏.
  • Toggle switch - 使用 Tailwind CSS 切换.
  • “Open” landing page - Cruip 使用 Tailwind CSS 样板构建的“打开”登录页面模板.
  • Testing Tailwind CSS plugins with Jest - 如何使用 Jest 测试 Tailwind CSS 插件.
  • Tailwind CSS with Webpack 4 and PostCSS - 如何使用 PostCSS 和 Webpack 设置 Tailwind CSS.
  • Tailwind CSS with CSS-in-JS - 如何在 CSS-in-JS 中使用 Tailwind CSS.
  • Tailwind CSS in a Laravel Project - 如何在 Laravel 项目中设置 Tailwind CSS.
  • Tailwind CSS with Ember - 如何将 Tailwind CSS 添加到 Ember 应用程序.
  • Sage WordPress theme and Tailwind CSS - 如何在 Sage 中设置 Tailwind CSS.
  • Tailwind CSS with GatsbyJS - 如何在 Gatsby 中使用 Tailwind CSS.
  • Tailwind CSS with Phoenix 1.4 - 如何在 Phoenix 1.4 中设置 Tailwind CSS.
  • Extend Tailwind CSS - 如何扩展 Tailwind CSS.
  • Web2Tailwind - 如何使用 AlpineJS 使用 Tailwind CSS 构建 Web 组件.
  • Rebuilding Laravel.io - 使用 Tailwind CSS 重建 Laravel.io.
  • Rebuilding Coinbase - 使用 Tailwind CSS 重建 Coinbase [see the Codepen].
  • Rebuilding Twitter - 使用 Tailwind CSS 重建 Twitter [see the CodePen].
  • Rebuilding YouTube - 使用 Tailwind CSS 重建 YouTube.
  • Rebuilding Netlify - 使用 Tailwind CSS 重建 Netlify.
  • Rebuilding Resolute - 使用 Tailwind CSS 重建 Resolute.
  • Let’s Build: Movie Production Landing Page - 使用 Tailwind CSS 构建电影制作登陆页面.
  • Lets Build: Responsive Navbar - 使用 Tailwind CSS 构建响应式导航栏.
  • Let’s Build: Dribbble Shot - 使用 Tailwind CSS 进行运球投篮.
  • Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
  • Let’s Build: Tweet component - 使用 Tailwind CSS 构建 Tweet 组件.
  • Modal Dialog - 使用 Tailwind CSS 创建模式对话框.
  • Building real-world UIs using Tailwind CSS - 构建 Shopify、Spotify、Netlify 和 Atlassian 的 UI.
  • Rebuilding FreshBooks - 使用 Tailwind CSS 重建 FreshBooks.
  • Login Page (PingPing) - 使用 Tailwind CSS 创建登录页面.
  • Login Page - 使用 Tailwind CSS 创建登录页面.
  • Vue.js Component with Tailwind and Laravel - 在 Laravel 项目中构建 Vue.js 组件.
  • Vue.js Modal - 使用 Tailwind CSS 和 Vue.js 构建可自定义的模式.
  • Navigation - 使用 Tailwind CSS 构建导航.
  • Forms with Tailwind CSS - 如何使用 Tailwind CSS 设置表单样式.
  • Photo gallery with CSS grids - 使用 CSS 网格和 Tailwind CSS 构建照片库.
  • Rebuilding Bartik - 使用 Vue.js 和 Tailwind CSS 重建 Bartik（Drupal 的默认主题）.
  • Rebuilding Airbnb’s Home Page - 使用 Tailwind CSS 重建 Airbnb 的主页.
  • Typographic defaults in Tailwind CSS
  • Create a responsive navigation menu in Tailwind CSS
  • Laracasts Weekly Stream: Tailwind
  • More experimentation with Tailwind CSS
  • Rebuilding Spotify
  • Rebuilding Discord
  • Rebuilding Meetup

Tailwind CSS相关推荐

  1. Hello Blazor：(2)集成Tailwind CSS续——nuget包方式

    前段时间,写了一篇"Blazor如何集成Tailwind CSS"的文章.但是操作起来比较麻烦,又是命令行,又是要修改一大堆配置. 后来,我又找到一个更简单的方法. 实现方式 新建 ...

  2. Hello Blazor：(2)集成Tailwind CSS

    Blazor默认集成了bootstrap,对于我这种后端出身,对CSS一知半解的.NET开发人员来说,使用起来还是有一定难度的. 好不容易才学到点皮毛,结果前端人员居然告诉我,bootstrap已经过 ...

  3. 使用React和Tailwind CSS搭建项目模板

    公众号关注 "太空编程" 设为 "星标",带你了解硬核的编程知识! 众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind ...

  4. 使用React和Tailwind CSS搭建项目框架

    众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板,一方面自己深入学习下,二来帮助新人更快地上手Tailwind CSS开发. 创建一 ...

  5. tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？

    tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...

  6. Tailwind CSS 是一个工具集 CSS 框架

    Tailwind CSS 是一个工具集 CSS 框架, 助你快速实现定制化的网站设计. Tailwind CSS 是一个高度可定制的基础层 CSS 框架,它为您提供了构建定制化设计所需的所有构建块,而 ...

  7. Tailwind CSS如何单页面使用并压缩tailwindcss

    tailwind的文档写的已经很全了,这里针对的是单页面构建不需要框架的对象 创建文件夹初始化依赖包 生成package.json 命令: npm init -y 安装必须品 命令:npm insta ...

  8. 在react脚手架中使用Tailwind CSS （入门）

    参考教程  Build a Website with React and Tailwind CSS - SitePoint 本文翻译外网,主要自用 1. 安装 Tailwind CSS 所需的依赖项 ...

  9. Zephyr 简介：用于 React Native 的 Tailwind CSS

    使用纯 CSS 构建复杂的 Web 应用程序可能是一项艰巨的挑战. 因此,开发人员倾向于使用 Bootstrap 和 Tailwind CSS 等流行的样式库来缩短开发周期. 与 Web 上的样式类似 ...

最新文章

  1. 水木告白工作室：Java从零入门之模仿头条资讯（一）
  2. HTML5实现刮奖效果
  3. AOL search
  4. shader weaver_Oracle通过邀请Weaver和Chin推动JavaFX向前发展
  5. 前端学习（2545)：找不到模块
  6. 深入了解ASP.NET运行内幕 .txt
  7. python编程快速上手第三章_Python编程快速上手 往让繁琐工作自动化-6.6 习题(示例代码)...
  8. SQL67 牛客每个人最近的登录日期(二)
  9. 百万年薪挖了个P7程序员，难道是“水货”？
  10. c4d python技巧_还在Bug不断？不妨试试Python中的这2个装__技巧
  11. crm系统是什么很棒ec实力_哪个CRM系统好
  12. Axure 进阶教程
  13. trajan 算法 离线求lca
  14. Latex表格制作记录
  15. 大数据_03【大数据基础知识】
  16. Nexus 5设备调试
  17. C++[缺省参数]的理解
  18. kaldi debug：Failed to read token [started at file position -1], expected IvectorExtractorStats
  19. 1 python数据分析概述
  20. 项目管理实践篇（二）：总结项目经历

热门文章

  1. office：word在编辑内容时反应迟钝的解决办法
  2. 安卓读取U盘容量信息，支持低版本API
  3. 最新系统MacOs13 Ventura(M1/M2芯片) + Parallels Desktop 18(PD18史上最强虚拟机)永久使用攻略
  4. 微信小程序开发详细步骤解决方案
  5. Vue Echarts世界地图
  6. 服务器提示位置不可用 拒绝访问,主编修复win10系统打开Local settings文件夹提示“位置不可用，拒绝访问的问题...
  7. Transphorm第三代经JEDEC认证的GaN半导体将助力稳态光电全新的1.6 kW钛金级ATX PC游戏电源
  8. Django路由写法
  9. iOS 绘图（drawrect）图片裁剪的红色框框
  10. Problem A: 判断是否是素数