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,前端)

  • 前端性能优化——如何提高页面加载速度？ 忘川... 前端性能优化html
    1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的
  • 前端开发入门指南：HTML、CSS和JavaScript基础知识 方向感超强的 javascriptcsshtml前端
    引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与
  • 小程序类毕业设计选题题目推荐 （29） 初尘屿风 毕业设计后端小程序课程设计springboot微信后端学习
    基于微信小程序的设备故障报修管理系统设计与实现，SpringBoot+Vue+毕业论文基于微信小程序的设备故障报修管理系统设计与实现，SSM+Vue+毕业论文基于微信小程序的电影院购票小程序系统，SpringBoot+Vue+毕业论文+指导搭建视频基于微信小程序的宿舍报修管理系统设计与实现，SpringBoot（15500字）+Vue+毕业论文+指导搭建视频基于微信小程序的电影院订票选座系统的设计
  • 前端504错误分析 ox0080 #北漂+滴滴出行WebVIP激励前端
    前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod
  • 网页中加载 SVG 的七大方式 前端熊猫 Svgjavascripthtmlsvgvue
    一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100
  • jQuery UI CSS 框架 API lly202406 开发语言
    jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工
  • scoped作用原理及样式穿透的应用 太阳与星辰 Vue2前端面试前端vue面试
    scoped作用原理及样式穿透的应用(1)scoped作用原理(2)对第三条的详细解释(3)场景----微调第三方库样式(4)样式穿透(5)补充(1)scoped作用原理scoped是Vue样式作用域的一个特性,相信很多人经常在项目中用它来避免样式污染(即样式隔离)。当我们在一个组件中给style标签加上scoped时候,它会遵循以下三个规则，如下为组件实例生成一个唯一标识(可以称为文件指纹),给
  • 部署前端项目2 augenstern416 前端
    前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V
  • CSS属性 augenstern416 CSScss前端
    1.CSS定位方式initial：设置该属性为浏览器默认值inherit：规定应该从父元素继承position属性的值。static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。absolute：生成绝对定位
  • 对象的操作 augenstern416 javascript开发语言ecmascript
    在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key
  • 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 网安詹姆斯 web安全CTF网络安全大赛pythonlinux
    【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S
  • 前端基础入门：HTML、CSS 和 JavaScript 阿绵 前端前端htmlcssjs
    在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
  • 网页制作03-html,css,javascript初认识のhtml的图像设置 Ama_tor 网页制作专栏htmlcss前端
    一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持
  • 【人工智能】提升编程效率的6种GPT实用应用技巧！保姆级讲解！ ChatGPT-千鑫 人工智能AI领域人工智能gptAI编程
    文章目录实用教程：六大AI编程技巧解锁效率提升技巧1：快速实现需求demo操作步骤技巧2：代码审查——AI帮你提升代码质量操作步骤技巧3：错误排查——AI助你快速定位问题操作步骤技巧4：代码注释——AI帮你理解复杂逻辑操作步骤技巧5：数据整理——AI帮你高效准备测试数据操作步骤技巧6：学习未知代码库——AI助你快速掌握新工具操作步骤使用教程：全面掌握CodeMoss的高效编程工具（1）VSCode
  • vue3+vite 自动引入export default的包 大橙子- vue.js前端
    importautoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),autoImport({imports:['vue','vue-router','pinia',{//相当于importuseRouterStackStorefrom'@/store/modules/r
  • 前端超长列表，虚拟滚动实现 大橙子- 前端cssjavascript
    虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
  • vue制作导航栏html,Vue实现导航栏菜单 DataQueen vue制作导航栏html
    本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
  • vue3 项目如何接入 AI 大模型 代码搬运媛 人工智能
    以下是在Vue3项目中接入AI大模型的一般步骤：准备工作确定要接入的AI模型，如OpenAI的gpt-3.5-turbo、科大讯飞的星火大模型等。选择AI模型及获取API密钥：注册对应AI平台的账号，进入账户设置页面找到“ViewAPIKeys”或类似选项，创建属于自己的API密钥，并妥善保存。创建Vue项目并安装依赖打开命令行，使用vuecreate项目名命令创建一个新的Vue项目，按照提示完成
  • vue-router 中滚动行为设置的妙用 代码搬运媛 vue.jsjavascript前端
    在vue-router里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。作用恢复滚动位置当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看
  • 前端框架虚拟DOM的产生 大橙子- 前端框架前端javascript
    直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面
  • DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar） 宝码香车 #DeepSeekvue.js前端javascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的导航栏（Navbar）前言页面效果指令输入属性定义1.导航栏样式相关2.导航项相关3.响应式相关4.对齐方式相关事件定义1.导航项点击事件2.菜单折叠切换事件其他建议1.可访问性2.动画效果3.图标支
  • 27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？ 程序员yt java机器学习开发语言
    今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研
  • linux安装python开发环境 燃冰结晶 linuxpythonlinuxinstallpythonjupyterpythonweb开发环境
    安装Anaconda下载Anacondawgethttps://repo.anaconda.com/archive/Anaconda3-5.3.0-Linux-x86_64.sh安装AnacondabashAnaconda3-5.3.0-Linux-x86_64.sh会选择安装路径会选择是否需要安装vscode,国内安装不上,所以不要安装了刷新环境配置source~/.bashrc验证是否安装成功
  • vue3 + vite引入地址路径报错，以及无法点击跳转相应的文件 zmyalh 前端javascriptvue.js
    vue3+vite引入地址路径报错，以及无法点击跳转相应的文件在项目中找到tsconfig.json，或者jsconfig.json文件，使用一下代码替换即可。如果两个文件都不存在，如果项目使用了ts，就创建tsconfig.json文件，复制下方代码。如果不是使用的ts，就创建jsconfig.json文件，复制下方代码。配置完成后关掉软件重启！！！{"compilerOptions":{"ba
  • vue播放m3u8视频 zmyalh html视频video前端
    这里封装成组件先安装插件npmivue-video-player-S//版本"^5.0.2"npmivideojs-flash-S//播放rtmpnpmivideojs-contrib-hls-S//播放m3u8父页面：//传入视频地址videoUrl页面引入importvideosfrom"../../../components/videos/videos.vue";components:{vi
  • CSS 修改 SVG图标的颜色 小达学徒 htmlcsssvg图标颜色改变
    方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh
  • i css svg,如何设置 CSS 背景图中的 SVG 的颜色 魔法少女皮皮瞎 icsssvg
    ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很
  • css给网页添加 黑白滤镜 nqxcwl 前端css给网页添加黑白滤镜
    /*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}
  • vue中nextTick函数和react类似实现 向画 vue.jsreact.js前端
    Vue3基本用法：import{nextTick}from'vue';//全局调用nextTick(()=>{//在下一个DOM更新循环后执行的代码});//在组件内部调用setup(){asyncfunctionhandleUpdate(){//修改数据...awaitnextTick();//在数据引发的DOM更新完成后执行的代码}}nextTick函数现在作为vue包的一个导出成员，需要显式
  • 芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案 青牛科技-Allen GLOBALCHIP音视频单片机嵌入式硬件收录机人工智能家用电器
    引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil
  • 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其他