jpruby
jpruby

Tailwind CSS

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 - 为样式列表和提供实用程序 标记.
  • 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

你可能感兴趣的:(vue,css,vscode,前端)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • [实验室服务器使用]使用VSCode、PyCharm、MobaXterm和CMD连接远程服务器 YuanDaima2048 工具使用服务器vscodepycharmcmd代理模式机器学习实验
    文章总览：YuanDaiMa2048博客文章总览实验室服务器使用：使用VSCode、PyCharm、MobaXterm和CMD连接远程服务器在进行实验室工作时，远程连接服务器是常见的需求之一。本篇文章根据个人的一些使用介绍使用不同工具连接服务器的方法，并提供优化功能，使服务器能够使用本机代理的说明。准备服务器账号信息Host（主机）:10.XXX.XX.XXXPort（端口）:[SSHPort]U
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他