awesome-awesomeness/html/tailwindcss.html

<!--lint disable awesome-heading awesome-github double-link no-dead-urls-->
<p align="center">
<br> <img width="100" src="./assets/logo.svg" alt="Tailwind CSS logo">
<br> <br>
</p>
<h2 align="center">
Awesome Tailwind CSS
</h2>
<p align="center">
<a href="https://tailwindcss.com">Tailwind CSS</a> is a utility-first
CSS framework for rapidly building custom user interfaces. <br> <br>
<a href="https://github.com/sindresorhus/awesome">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome badge">
</a>   <a href="https://github.com/sindresorhus/awesome-lint">
<img src="https://github.com/aniftyco/awesome-tailwindcss/workflows/Lint/badge.svg" alt="Lint status badge">
</a> <br> <br>
</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#useful-links">Useful Links</a></li>
<li><a href="#ide-extensions">IDE Extensions</a></li>
<li><a href="#plugins">Plugins</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#ui-libraries-components--templates">UI Libraries,
Components &amp; Templates</a></li>
<li><a href="#starters--themes">Starters &amp; Themes</a></li>
<li><a href="#learning">Learning</a></li>
</ul>
<h2 id="useful-links">Useful Links</h2>
<p><strong>Legend</strong>: 💙 Official resource</p>
<ul>
<li>💙 <a href="https://tailwindcss.com">Website</a> - Official Tailwind
CSS website.</li>
<li>💙 <a
href="https://github.com/tailwindcss/tailwindcss">Repository</a> -
Official Tailwind CSS repository.</li>
<li>💙 <a href="https://tailwindui.com">Tailwind UI</a> - Component
library made with Tailwind CSS.</li>
<li>💙 <a href="https://github.com/tailwindlabs/headlessui">Headless
UI</a> - Completely unstyled, fully accessible UI components.</li>
<li>💙 <a href="https://heroicons.com/">Heroicons</a> - Beautiful,
hand-crafted SVG icons.</li>
<li>💙 <a href="https://play.tailwindcss.com/">Play</a> - Advanced
online playground for Tailwind CSS.</li>
<li>💙 <a href="https://tailwindcss.com/discord">Discord</a> - Official
Discord server to connect with other community members about Tailwind
CSS.</li>
<li><a href="https://tailwindweekly.com/">Tailwind Weekly</a> - Weekly
newsletter about all things Tailwind CSS.</li>
</ul>
<h2 id="ide-extensions">IDE Extensions</h2>
<p><strong>Legend</strong>: 💙 Official resource</p>
<ul>
<li>💙 <a
href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">IntelliSense
for Code</a> - Provides IntelliSense in Visual Studio Code.</li>
<li><a href="https://github.com/merrickluo/lsp-tailwindcss">LSP support
for Emacs</a> - LSP support for Emacs.</li>
<li><a
href="https://marketplace.visualstudio.com/items?itemName=ellreka.tailwindcss-highlight">Tailwind
CSS Highlight</a> - Highlights utility classes in Visual Studio
Code.</li>
<li><a
href="https://github.com/Jackardios/vscode-css-to-tailwindcss">CSS to
TailwindCSS converter for Code</a> - Converts CSS to Tailwind CSS in
Visual Studio Code.</li>
</ul>
<h2 id="plugins">Plugins</h2>
<p><strong>Legend</strong>: 💙 Official plugin · 🎨 Theming · 💼
Utilities · 🧬 Variants · 🧩 Components · 🛑 Deprecated</p>
<ul>
<li>💙🧩 <a
href="https://github.com/tailwindlabs/tailwindcss-typography">Typography</a>
- Adds a <code>prose</code> class for beautiful typographic
defaults.</li>
<li>💙💼 <a
href="https://github.com/tailwindlabs/tailwindcss-container-queries">Container
queries</a> - Provides utilities for container queries.</li>
<li>💙 <a
href="https://github.com/tailwindlabs/tailwindcss-forms">Forms</a> -
Adds better default styles to form elements.</li>
<li>🎨🧬 <a
href="https://github.com/JakeNavith/tailwindcss-theme-variants">Theme
Variants</a> - Adds theme variants based on media queries and/or CSS
selectors.</li>
<li>🎨🧬 <a
href="https://github.com/crswll/tailwindcss-theme-swapper">Theme
Swapper</a> - Theming using CSS variables, with media queries
support.</li>
<li>🎨🧬 <a
href="https://github.com/RyanClementsHax/tailwindcss-themer">Themer</a>
- Adds theming support for Tailwind CSS with CSS variables and
variants.</li>
<li>🎨🧩 <a href="https://github.com/mdbootstrap/TW-Elements/">Tailwind
Elements</a> - Extends Tailwind CSS with 500+ interactive components
(datepickers, modals, forms, tables, darkmode).</li>
<li>🎨🧩 <a href="https://github.com/mertasan/tailwindcss-variables">CSS
Variables</a> - Exports custom CSS variables.</li>
<li>🎨💼 <a
href="https://github.com/enjidev/tailwindcss-accent">Accent</a> - Adds
<code>accent</code> colors for more dynamic and flexible color
utilization.</li>
<li>💼🧬 <a href="https://github.com/ecklf/tailwindcss-radix">Radix</a>
- Adds utilities and variants for styling Radix UI state.</li>
<li>💼 <a
href="https://github.com/hacknug/tailwindcss-image-rendering">Image
Rendering</a> - Adds <code>image-rendering</code> utilities.</li>
<li>💼 <a
href="https://github.com/jonaskay/tailwindcss-elevation">Elevation</a> -
Adds <a
href="https://material.io/design/environment/elevation.html">Material UI
<code>elevation</code></a> utilities.</li>
<li>💼 <a href="https://github.com/aerni/tailwindcss-rfs">RFS</a> - Adds
<a href="https://github.com/twbs/rfs"><code>RFS</code></a>
utilities.</li>
<li>💼 <a
href="https://github.com/20lives/tailwindcss-rtl">Bidirectional</a> -
Adds utilities for creating multilingual bidirectional layouts.</li>
<li>💼 <a
href="https://github.com/AndersNielsen85/tailwindcss-bg-svg">Background
SVG</a> - Inject SVGs as background images with color variants.</li>
<li>💼 <a
href="https://github.com/shorwood/tailwindcss-unsplash">Background
Unsplash</a> - Apply <a href="https://unsplash.com">unsplash.com</a>
images as background.</li>
<li>💼 <a
href="https://github.com/praveenjuge/tailwindcss-brand-colors">Brand
Colors</a> - Adds various brand colors for background, border and
text.</li>
<li>💼 <a
href="https://github.com/karolis-sh/tailwind-bootstrap-grid">Bootstrap
Grid</a> - Generates Bootstrap’s style flexbox grid system.</li>
<li>💼 <a
href="https://github.com/stormwarning/tailwindcss-capsize">Leading
Trim</a> - Adds utilities to trim text whitespace, using <a
href="https://github.com/seek-oss/capsize">Capsize</a>.</li>
<li>💼 <a
href="https://github.com/reslear/tailwind-scrollbar-hide">Scrollbar
Hide</a> - Adds <code>scrollbar-hide</code> class for visual hide
scrollbar.</li>
<li>💼 <a
href="https://github.com/davidhellmann/tailwindcss-fluid-type">Fluid
Type</a> - Adds fluid type (<code>font-size</code>) utilities.</li>
<li>💼 <a
href="https://github.com/SavvyWombat/tailwindcss-grid-areas">Grid
Areas</a> - Adds <code>grid-areas</code> and <code>grid-area</code>
utilities.</li>
<li>💼 <a href="https://github.com/dgknca/tailwindcss-full-bleed">Full
bleed background and borders</a> - Provides utilities for extended
backgrounds and borders.</li>
<li>💼 <a
href="https://github.com/joshdavenport/tailwindcss-filter-order">CSS
Filter Order</a> - Adds <code>filter-order</code> utilities for changing
the order of filters in the generated CSS.</li>
<li>💼 <a href="https://github.com/sambauers/tailwindcss-3d">Tailwind
CSS 3D</a> - Adds 3D <code>transform</code> utilities and
animations.</li>
<li>💼 <a
href="https://github.com/dulltackle/tailwindcss-claymorphism">Claymorphism</a>
- Adds <code>clay</code> utilities for creating claymorphism style.</li>
<li>💼🧬🧩 <a href="https://github.com/barvian/fluid-tailwind">Fluid</a>
- Adds fluid <code>clamp()</code> versions of every built-in
utility.</li>
<li>🧬 <a
href="https://github.com/formkit/formkit/tree/master/packages/tailwindcss">FormKit</a>
- Adds variants for input and form states for FormKit.</li>
<li>🧬 <a href="https://github.com/aniftyco/tailwind-htmx">Htmx</a> -
Adds variants for styling on <a
href="https://htmx.org/reference/#classes">htmx</a> events.</li>
<li>🧩 <a
href="https://github.com/jorenvanhee/tailwindcss-debug-screens">Debug
screens</a> - Adds a component that shows the currently active screen
(responsive breakpoint).</li>
<li>💼 <a
href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds">Dot
&amp; Grid Backgrounds</a> - Adds <code>bg-grid</code> and
<code>bg-dot</code> classes to add easy-to-customize grid and dot
pattern backgrounds with just CSS.</li>
</ul>
<details>
<summary>
🛑 <em>Below are official plugins which functionalities are either
deprecated or (partially) implemented in core.</em>
</summary>
<ul>
<li>🛑💼💙 <a
href="https://github.com/tailwindlabs/tailwindcss-line-clamp">Line
Clamp</a> - Provides utilities for visually truncating text after a
fixed number of lines.</li>
<li>🛑🧩💙 <a
href="https://github.com/tailwindlabs/tailwindcss-custom-forms">Custom
Forms</a> - Adds better default styles to form elements.</li>
<li>🛑💙💼 <a
href="https://github.com/tailwindlabs/tailwindcss-aspect-ratio">Aspect
Ratio</a> - Adds composable aspect ratio utilities.</li>
</ul>
</details>
<h2 id="tools">Tools</h2>
<p><strong>Legend</strong>: 🌍 Accessible online · 🔼 Conversion or
upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼
Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀
Framework · 💰 Paid plans</p>
<ul>
<li>💙💼 <a
href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss">Prettier
plugin</a> - Official Tailwind CSS plugin for Prettier.</li>
<li>🎨🌍🔧 <a href="https://uicolors.app/create">Ui Colors</a> - Color
palette generator for Tailwind CSS.</li>
<li>🎨🌍🔧 <a
href="https://javisperez.github.io/tailwindcolorshades">Tailwind Color
Shades</a> - Color shades generator for Tailwind CSS.</li>
<li>🎨🌍🔧 <a
href="https://adevade.github.io/color-scheme-generator">Palette
generator</a> - Color palette generator that outputs Tailwind CSS
configuration files.</li>
<li>🎨🌍🔧 <a href="https://tailwind-colors.meidev.co">Tailwind
Colors</a> - Color configuration generator for Tailwind CSS.</li>
<li>🎨🌍🔧 <a
href="https://stefanbuck.com/tailwind-color-theme-explorer">Tailwind
Color Explorer</a> - Color explorer for Tailwind CSS.</li>
<li>🎨🌍🔧 <a href="https://tailwind.ink/">TailwindInk</a> - AI palette
generator, trained with the Tailwind CSS palette.</li>
<li>🎨🌍🔧 <a href="https://gradient-designer.csspost.com/">Gradient
Designer</a> - Generate gradients for Tailwind 2.0+.</li>
<li>🎨🌍🔧 <a href="https://grayscale.design/">Grayscale Design</a> - A
Luminance-based color palette generator.</li>
<li>🎨🌍🔧 <a href="https://hypercolor.dev/">Hypercolor</a> - Collection
of pre-configured Tailwind CSS gradients with directional options.</li>
<li>🎨🌍🔧 <a href="https://palettolithic.com">Palettolithic</a> -
Generates harmonius color palettes based on one color.</li>
<li>🎨🌍🔧 <a
href="https://tailwindcomponents.com/gradient-generator">Tailwind
Gradient Generator</a> - Create perfect Tailwind CSS gradients with zero
lines of code.</li>
<li>🎨🌍🔧 <a href="https://www.tints.dev/">Tints</a> - Color palette
penerator and API for Tailwind CSS.</li>
<li>🌍🔧💼 <a href="https://github.com/tw-in-js/twind">Twind</a> -
Compiler functions that turn Tailwind’s classes into CSS at run, serve
and build time.</li>
<li>🌍🔧 <a href="https://tail-animista.vercel.app">tail-animista</a> -
Configurable custom animation utilities generator for Tailwind CSS.</li>
<li>🌍🔧 <a
href="https://brands-tail-color.vercel.app/">brands-tail-color</a> -
Configuration generator using various brands’ colors.</li>
<li>🌍 <a
href="https://tailwind-typography-playground.vercel.app/">Typography
playground</a> - Tool for trying different Google Fonts combinations
with the Tailwind CSS typography plugin.</li>
<li>🌍 <a href="https://flowrift.com">Flowrift</a> - Beautifully
designed Tailwind CSS UI blocks.</li>
<li>🔼🌍🔧 <a href="https://www.tailwindhelper.com/">Tailwindhelper</a>
- Visualize Tailwind CSS classes and unit converter.</li>
<li>🔼🌍 <a
href="https://github.vue.tailwind-prefix.cbass.dev">Prefixer</a> -
Tailwind classes’ prefixer tool.</li>
<li>🔼🌍 <a href="https://transform.tools/css-to-tailwind">CSS to
Tailwind CSS Converter</a> - Converts CSS to Tailwind CSS by suggesting
classes that best match.</li>
<li>🔼 <a href="https://github.com/awssat/tailwindo">Tailwindo</a> -
Bootstrap to Tailwind CSS converter.</li>
<li>🔼 <a href="https://github.com/avencera/rustywind">RustyWind</a> -
CLI tool for sorting Tailwind CSS classes.</li>
<li>🚀 <a href="https://maizzle.com/">Maizzle</a> - Framework for rapid
email prototyping with Tailwind CSS.</li>
<li>🅰 <a
href="https://github.com/TVke/react-native-tailwindcss">react-native-tailwindcss</a>
- React Native typing system.</li>
<li>💼 <a href="https://github.com/clnt/alfred-tailwindcss-docs">Alfred
Workflow</a> - Fast Tailwind CSS documentation search application.</li>
<li>💼 <a
href="https://github.com/forsartis/vue-cli-plugin-tailwind">vue-cli-plugin-tailwind</a>
- Vue CLI plugin that adds Tailwind CSS to a project.</li>
<li>💼 <a
href="https://github.com/nuxt-community/tailwindcss-module"><span
class="citation"
data-cites="nuxtjs/tailwindcss">@nuxtjs/tailwindcss</span></a> -
Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env
1).</li>
<li>💼 <a
href="https://github.com/agneym/preact-cli-tailwind">preact-cli-tailwind</a>
- Tailwind CSS integration for Preact.</li>
<li>💼 <a
href="https://github.com/rails/tailwindcss-rails">tailwindcss-rails</a>
- Gem for using Tailwind CSS with Rails’ asset pipeline.</li>
<li>💼🔧 <a
href="https://github.com/ben-rogerson/twin.macro">twin.macro</a> - Use
Tailwind classes within any CSS-in-JS library.</li>
<li>💼🔧 <a
href="https://github.com/await-ovo/tailwindcss-webpack-plugin">tailwindcss-webpack-plugin</a>
- Out-of-the-box Tailwind CSS, supports “Design in DevTools” mode and
visualizes Tailwind CSS configuration.</li>
<li>💼🔧 <a
href="https://github.com/await-ovo/tailwindcss-webpack-plugin/tree/main/packages/vite-plugin">tailwindcss-vite-plugin</a>
- Vite plugin for Tailwind CSS, supports “Design in DevTools” mode and
visualizes Tailwind CSS configuration.</li>
<li>💼🔧 <a
href="https://github.com/rogden/tailwind-config-viewer">Tailwind Config
Viewer</a> - Local UI tool for visualizing your Tailwind CSS
configuration file.</li>
<li>💼 <a href="https://github.com/crswll/clb">clb</a> - clb (class list
builder) is a utility function that builds a class list based on a <a
href="https://stitches.dev/">Stitches</a> like API.</li>
<li>💼 <a
href="https://github.com/antomics/react-with-class">react-with-class</a>
- Utility function for creating primitive React components with a set of
classes, props or variants.</li>
<li>💼 <a
href="https://github.com/lowfront/twined-components">twined-components</a>
- Extended component of a styled-components that prioritizes class names
for use in Tailwind CSS.</li>
<li>💼 <a href="https://github.com/vechai/tails-devtools">Tails
DevTools</a> - All-in-one browser extension for Tailwind CSS.</li>
<li>💼 <a href="https://github.com/impulse-oss/impulse">Impulse.dev</a>
– UI editor for Tailwind CSS and React that edits your code.</li>
<li>💼 <a
href="https://github.com/danielvolchek/tailiscope.nvim">Tailiscope.nvim</a>
- Tailwind CSS cheat sheet integrated in Neovim.</li>
<li>💼 <a href="https://www.raycast.com/vimtor/tailwindcss">Raycast
Extension</a> - Search classes, documentation and colors in Raycast
Launcher.</li>
<li>💼 <a href="https://divmagic.com">DivMagic</a> - Copy any web
element and style as Tailwind CSS component.</li>
<li>💼 <a
href="https://chromewebstore.google.com/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl">Gimli
Tailwind</a> - Smart tools for Tailwind CSS as a browser extension.</li>
<li>🌍 <a href="https://tailwindcomponents.com/cheatsheet">Tailwind
Cheat Sheet</a> - Tailwind CSS class names in a searchable page.</li>
<li>🌍🔧 <a href="https://www.tailwindgen.com/">Tailwind Grid
Generator</a> - Drag and drop Tailwind CSS grid generator.</li>
<li>🌍🔧 <a href="https://manuarora.in/boxshadows">Tailwind Box Shadows
Generator</a> - Box Shadows generator.</li>
<li>💰🌍🔧 <a href="https://www.devwares.com/windframe/">Windframe</a> -
Tailwind CSS drag and drop builder to rapidly build and prototype
websites.</li>
<li>🌍 <a href="https://statictailwind.com">Static Tailwind</a> - The
most used Tailwind classes, precompiled, with no build step.</li>
</ul>
<h2 id="ui-libraries-components-templates">UI Libraries, Components
&amp; Templates</h2>
<p><strong>Legend</strong>: 💙 Official resource · 📚 Library · 🧩
Components · 📁 Templates</p>
<ul>
<li>💙🧩 <a href="https://tailwindui.com">Tailwind UI</a> - Component
library made with Tailwind CSS.</li>
<li>💙📚 <a href="https://github.com/tailwindlabs/headlessui">Headless
UI</a> - Completely unstyled, fully accessible UI components.</li>
<li>💙📁 <a
href="https://tailwindui.com/templates/catalyst">Catalyst</a> -
Beautiful, accessible application UI kit for React.</li>
<li>📚 <a
href="https://github.com/alfonsobries/vue-tailwind">VueTailwind</a> -
Vue.js UI library using Tailwind CSS.</li>
<li>📚 <a href="https://www.vechaiui.com/">Vechai UI</a> - High-quality
accessible React components with the built-in dark mode using Tailwind
CSS.</li>
<li>📚 <a
href="https://flowbite.com/docs/getting-started/introduction/">Flowbite</a>
- Open-source component library built with Tailwind CSS.</li>
<li>📚 <a href="https://a17t.miles.land">a17t</a> - Atomic design
toolkit built to extend Tailwind CSS.</li>
<li>📚 <a href="https://github.com/knipferrc/tails-ui">tails-ui</a> -
React UI library using Tailwind CSS.</li>
<li>📚 <a href="https://github.com/thedevdojo/tails">tails</a> -
Hand-crafted templates and components using Tailwind CSS.</li>
<li>📚 <a href="https://github.com/rgossiaux/svelte-headlessui">Svelte
Headless UI</a> - Unofficial Svelte port of Headless UI.</li>
<li>📚 <a href="https://xtendui.com/">Xtend UI</a> - Tailwind CSS
components with advanced interactions and animations.</li>
<li>📚 <a href="https://headlessui-float.vercel.app">Headless UI
Float</a> - Floating UI integration for Headless UI.</li>
<li>📚 <a href="https://vanilla-components.com">Vanilla Components</a> -
Set of fully customizable Vue components.</li>
<li>📚 <a href="https://sailboatui.com/">Sailboat UI</a> - Modern UI
framework for Tailwind CSS.</li>
<li>📚 <a href="https://www.builtatlightspeed.com/">Built At
Lightspeed</a> - Massive directory of 500+ Tailwind templates, starters
and UI kits.</li>
<li>📚 <a
href="https://statichunt.com/tailwind-templates">Statichunt</a> - Open
source directory of hand-picked free and premium Tailwind templates
&amp; Starters.</li>
<li>📚 <a href="https://tailkits.com/">Tailkits</a> - Curated Tailwind
CSS components, templates, UI kits, resources, tools &amp; more.</li>
<li>📚 <a href="https://stdf.design">STDF</a> - Mobile web component
library based on Svelte and Tailwind CSS.</li>
<li>📚 <a href="https://react-twc.vercel.app">TWC</a> - Lightweight
library to create reusable React + Tailwind CSS components in one
line.</li>
<li>📚 <a href="https://tremor.so">Tremor</a> - React library to build
charts and dashboards with Tailwind CSS.</li>
<li>🧩 <a href="https://mertjf.github.io/tailblocks">TailBlocks</a> -
60+ different ready to use Tailwind CSS blocks.</li>
<li>🧩 <a href="https://tailwindcomponents.com">Tailwind Components</a>
- Community-driven Tailwind CSS component repository.</li>
<li>🧩 <a href="https://www.tailwindtoolbox.com">Tailwind Toolbox</a> -
Templates, components and resources.</li>
<li>🧩 <a href="https://merakiui.com">Meraki UI Components</a> -
Beautiful Tailwind CSS components that support RTL languages.</li>
<li>🧩 <a href="https://github.com/hasinhayder/tailwind-cards">Tailwind
Cards</a> - Growing collection of text/image cards.</li>
<li>🧩📁 <a href="https://www.tailwindtemplates.io">Tailwind
Templates</a> - Collection of templates and components.</li>
<li>🧩📁 <a href="https://treact.owaiskhan.me">Treact</a> - React UI
templates and components built using Tailwind CSS.</li>
<li>🧩📁 <a href="https://github.com/zeroblack-c/jakarta-lte">Jakarta
LTE</a> - Admin template using Tailwind CSS.</li>
<li>🧩📁 <a href="https://www.themes.dev/">themes.dev</a> - Handcrafted,
free and premium Tailwind CSS themes and components.</li>
<li>🧩 <a href="https://sailui.github.io/">Sail UI</a> - Collection of
basic UI components built on Tailwind CSS.</li>
<li>🧩 <a
href="https://craigerskine.github.io/jquery-tailwind-checkbox-toggle">jQuery
Toggler</a> - Switches using jQuery and Tailwind CSS.</li>
<li>🧩 <a
href="https://creative-tim.com/learning-lab/tailwind-starter-kit">Tailwind
Kit</a> - Framework-agnostic, Vue.js, React and Angular components.</li>
<li>🧩 <a href="https://windstrap.netlify.app">Windstrap</a> - Tailwind
CSS with Bootstrap JS.</li>
<li>🧩 <a href="https://blocks.wickedtemplates.com/">WickedBlocks</a> -
Collection of more than 120 layout blocks and components built with
Tailwind CSS.</li>
<li>🧩 <a href="https://github.com/saadeghi/daisyui">Daisy UI</a> - UI
Components for Tailwind CSS.</li>
<li>🧩 <a href="https://kitwind.io/products/kometa/components">Kometa UI
Kit</a> - Free multi-purpose UI kit, built with Tailwind CSS.</li>
<li>🧩 <a href="https://mambaui.com">Mamba UI</a> - Free Tailwind CSS
components, sections and templates.</li>
<li>🧩 <a href="https://github.com/kenhyuwa/litepie-datepicker">Litepie
Date picker</a> - A date range picker component for Vue.js and Tailwind
CSS.</li>
<li>🧩 <a
href="https://github.com/themesberg/tailwind-datepicker">Tailwind
Datepicker</a> - Adds a datepicker component built with Tailwind CSS and
vanilla JavaScript.</li>
<li>🧩 <a
href="https://github.com/basarozcan/vue-tailwindcss-typeahead">Tailwind
Typeahead</a> - Typeahead/Autocomplete component built with Vue.js and
Tailwind CSS.</li>
<li>🧩 <a href="https://material-tailwind.com">Material Tailwind</a> -
Easy to use components library for Tailwind CSS and Material
Design.</li>
<li>🧩 <a href="https://layoutsfortailwind.lalokalabs.dev">Layouts for
Tailwind</a> - Layouts and UI Patterns for Tailwind CSS.</li>
<li>🧩 <a href="https://hyperui.dev">HyperUI</a> - Open source marketing
and ecommerce Tailwind CSS components.</li>
<li>🧩 <a href="https://snippets.alexandru.so">Snippets</a> - Open
source collection of animation snippets made for Tailwind CSS.</li>
<li>🧩 <a href="https://fancytailwind.com">Fancy Tailwind</a> - Large
collection of Tailwind CSS UI components (700+).</li>
<li>🧩 <a href="https://mynaui.com">Myna UI</a> - Open source UI
Components and Marketing Elements made with Tailwind CSS.</li>
<li>🧩 <a href="https://sira.riccox.com">Sira UI</a> - Customizable and
accessible design system which provides TailwindCSS component class name
library to build modern UI.</li>
<li>🧩 <a href="https://www.ripple-ui.com">RippleUI</a> - Clean, modern
and beautiful Tailwind CSS components.</li>
<li>🧩 <a href="https://wind-ui.com">Wind UI</a> - Expertly made,
responsive, accessible components in React and HTML ready to be used on
your website or app.</li>
<li>🧩 <a href="https://devdojo.com/pines">Pines UI</a> - Alpine and
Tailwind CSS UI library.</li>
<li>🧩 <a href="https://www.nativewind.dev">NativeWind</a> - NativeWind
uses Tailwind CSS as scripting language to create a universal style
system for React Native.</li>
<li>🧩 <a href="https://windstatic.com">Windstatic</a> - Set of 161
elements &amp; layouts made with Tailwind CSS and Alpine.js.</li>
<li>🧩 <a href="https://tailwindflex.com">TailwindFlex</a> - Free
library of Tailwind CSS examples.</li>
<li>🧩 <a href="https://ui.shadcn.com">Shadcn UI</a> - Re-usable
components built using Radix UI and Tailwind CSS.</li>
<li>📁 <a href="https://www.creative-tim.com/product/vue-notus">Vue
Notus</a> - Open-source Tailwind CSS and Vue.js UI kit.</li>
<li>📁 <a href="https://easytailwind.now.sh">EasyTailwind</a> -
Freemium, easily customizable templates made with Tailwind CSS.</li>
<li>📁 <a href="https://windmill-dashboard.vercel.app/">Windmill
Dashboard</a> - Multi theme, completely accessible dashboard
template.</li>
<li>📁 <a href="https://github.com/tailwindadmin/admin">Tailwind
Admin</a> - Administration panel template with Tailwind CSS.</li>
<li>📁 <a href="https://landing-gradients.netlify.app">Landing
Gradients</a> - Landing page template using gradients (1.7+).</li>
<li>📁 <a
href="https://github.com/mohusman360/mohusman360.github.io">Resume</a> -
Simple resume with Tailwind CSS.</li>
<li>📁 <a
href="https://github.com/cruip/tailwind-landing-page-template">Simple
Light</a> - Free landing page template built with React &amp; Tailwind
CSS.</li>
<li>📁 <a
href="https://github.com/wobsoriano/v-dashboard">V-Dashboard</a> -
Dashboard starter template built with Vue 3 and Tailwind CSS.</li>
<li>📁 <a
href="https://github.com/Smuice-com/free-nuxtjs-tailwindcss-landing-page-template">Petra</a>
- Free landing page template built with Nuxt.js &amp; Tailwind CSS.</li>
<li>📁 <a href="https://github.com/otezz/tailmin">Tailmin</a> - Admin
dashboard built with Vue.js and Tailwind CSS.</li>
<li>📁 <a href="https://github.com/ohmysmtp/templates">OhMySMTP
Templates</a> - Set of Transactional HTML Email Templates, built with
Maizzle</li>
<li>📁 <a
href="https://www.creative-tim.com/product/material-tailwind-kit-react">Material
Tailwind Kit React</a> - Free Tailwind CSS and React UI kit.</li>
<li>📁 <a
href="https://www.creative-tim.com/product/material-tailwind-dashboard-react">Material
Tailwind Dashboard React</a> - Free Tailwind CSS and React admin
template.</li>
<li>📁 <a
href="https://github.com/justboil/admin-one-vue-tailwind">Admin One Vue
3</a> - Free Vue.js 3 Tailwind CSS admin template with Vite &amp; Vue
CLI support.</li>
<li>📁 <a href="https://cruip.com/">Cruip</a> - Beautifully designed
HTML, React, and Vue.js templates.</li>
<li>📁 <a
href="https://github.com/justboil/admin-one-react-tailwind">Admin One
React</a> - Free React.js Tailwind CSS admin template with Next.js &amp;
TypeScript.</li>
<li>📁 <a
href="https://github.com/themesberg/flowbite-admin-dashboard">Flowbite
Admin Dashboard</a> - Open-source admin dashboard template built with
Tailwind CSS and Flowbite.</li>
<li>📁 <a href="https://github.com/fortezhuo/fortezhuo.my.id">Astro
Template Resume</a> - Eye-catching resume template built with Astro,
Tailwind CSS.</li>
<li>📁 <a
href="https://github.com/chrismwilliams/astro-theme-cactus">Astro
Template Cactus</a> - Tailwind CSS Astro starter template.</li>
<li>📁 <a href="https://github.com/JustGoodUI/ovidius-astro-theme">Astro
Template Ovidius</a> - Tailwind CSS &amp; Astro blog template.</li>
<li>📁 <a href="https://github.com/JustGoodUI/dante-astro-theme">Astro
Template Dante</a> - Tailwind CSS &amp; Astro blog/portfolio
template.</li>
</ul>
<h2 id="starters-themes">Starters &amp; Themes</h2>
<p><strong>Legend</strong>: 💼 Package · 📟 Command line tool/generator
· 🚀 Cloneable</p>
<ul>
<li>📟 <a
href="https://github.com/DemianD/create-react-app-tailwindcss">Create
React App with PurgeCSS</a> - CRA script that adds Tailwind CSS and
PurgeCSS.</li>
<li>📟 <a
href="https://github.com/use-preset/laravel-tailwindcss">Laravel
Preset</a> - Adds Tailwind CSS to the Laravel framework.</li>
<li>📟💼 <a
href="https://github.com/laravel-frontend-presets/tailwindcss">Laravel
Front-end Preset</a> - Front-end preset using Tailwind CSS for
Laravel.</li>
<li>📟💼 <a
href="https://github.com/Naoray/dark-tailwind-preset">Laravel Dark
Front-end Preset</a> - Dark-themed front-end preset using Tailwind CSS
for Laravel.</li>
<li>🚀 <a
href="https://github.com/muhajirframe/react-tailwind-emotion-starter">Create
React App with EmotionJS</a> - CRA boilerplate using Tailwind CSS and
Emotion JS.</li>
<li>📟 <a
href="https://github.com/dance2die/cra-template-tailwindcss-typescript">Create
React App with TypeScript</a> - CRA template with support for Tailwind
CSS and TypeScript.</li>
<li>📟 <a href="https://github.com/msaaddev/create-next-pwa">Next.js
PWA</a> – CLI that generate boilerplate code of Next.js PWA along with
Tailwind CSS integration.</li>
<li>📟 <a
href="https://github.com/msaaddev/new-tailwind-app">new-tailwind-app</a>
- Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic
Tailwind CSS apps.</li>
<li>🚀 <a
href="https://github.com/michelegera/create-tailwindcss-boilerplate">Tailwind
CSS Boilerplate</a> - Tailwind CSS boilerplate using Parcel.</li>
<li>🚀 <a href="https://github.com/taylorbryant/tailwind-jekyll">Jekyll
Starter</a> - Jekyll starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/mhanberg/jekyll-tailwind-starter">Jekyll
Starter</a> - Jekyll starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/shenlu89/jekyll-tailwindcss-starter">Jekyll
Starter</a> - Jekyll starter using Tailwind CSS</li>
<li>🚀 <a href="https://github.com/simonswiss/tailwind-starter">Gulp
Starter</a> - Gulp starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/taylorbryant/gatsby-starter-tailwind">Gatsby
Starter</a> - Gatsby starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/PlanFlowDev/Simplicity-Itself-Gatsby-Tailwind-Starter-Theme">Gatsby
Starter Simplicity</a> - Gatsby starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/ecklf/gatsby-typescript-tailwind">Gatsby
Starter + TypeScript</a> - Gatsby starter using Tailwind CSS and
TypeScript.</li>
<li>🚀 <a
href="https://github.com/muhajirframe/gatsby-tailwind-emotion-starter">Gatsby
Starter + Emotion JS</a> - Gatsby starter using Tailwind CSS and Emotion
JS.</li>
<li>🚀 <a
href="https://github.com/mjsarfatti/gatsby-starter-tailwind-opinionated">Gatsby
Starter Opinionated</a> - Gatsby starter using Tailwind CSS and
opinionated goodies.</li>
<li>🚀 <a href="https://github.com/kriswep/cra-tailwindcss">Create React
App Boilerplate</a> - CRA boilerplate using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/saadeghi/create-react-app-tailwindcss">Create
React App with PurgeCSS + Autoprefixer + CSSNano</a> - CRA boilerplate
using CSS Nano.</li>
<li>🚀 <a href="https://github.com/jack-pallot/dogpatch">Dogpatch</a> -
WordPress starter using webpack, Vue, Babel and Tailwind CSS.</li>
<li>🚀 <a href="https://github.com/oddstronaut/tailwind-next">Next.js
Starter</a> - Next.js boilerplate using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/EricPKerr/sapper-tailwindcss-starter">Sapper
&amp; Svelte Starter</a> - Svelte boilerplate using Sapper, Tailwind
CSS, Purge CSS, Prettier and ESLint.</li>
<li>🚀 <a
href="https://github.com/HugoDF/netlify-lambda-tailwind-static-starter">Netlify
Lambda Starter</a> - Netlify Lambda boilerplate using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter">Hugo
Theme Starter with Tailwind CSS</a> - Hugo theme starter using Tailwind
CSS.</li>
<li>🚀 <a
href="https://github.com/scottishstoater/jamstack-web-starter">Eleventy
Web Starter</a> - Starter kit using Eleventy, Tailwind CSS, webpack and
PostCSS.</li>
<li>🚀 <a
href="https://github.com/arkency/nanoc-parcel-tailwind-starter">Nanoc
Starter</a> - Nanoc starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate">PostCSS
and Browsersync Boilerplate</a> - Boilerplate using CSS Nano.</li>
<li>🚀 <a
href="https://github.com/saadeghi/tailwindcss-parceljs-typescript-boilerplate">ParcelJS
+ TypeScript Boilerplate</a> - Boilerplate using Tailwind CSS, ParcelJS
bundler and TypeScript.</li>
<li>🚀 <a
href="https://github.com/xiaoluoboding/vuepress-tailwind-theme-starter">VuePress
Tailwind CSS Starter</a> - A VuePress starter using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/windedge/gatsby-tailwind-serif">Gatsby
Serif</a> - Gatsby’s serif theme using Tailwind CSS.</li>
<li>🚀 <a href="https://git.habd.as/jhabdas/seminyak">Seminyak Hugo
Theme</a> - Hugo theme using Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/ixartz/Eleventy-Starter-Boilerplate/">Eleventy
Starter</a> - Production-ready, SEO-friendly blog starter using Tailwind
CSS.</li>
<li>🚀 <a
href="https://github.com/wobsoriano/vite-react-tailwind-starter">Vite +
React + Tailwind Starter</a> - Boilerplate using Vite, React and
Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/PDMLab/vite-react-typescript-tailwind-starter">Vite
+ React + TypeScript + Tailwind 3.x starter</a> - GitHub Template for
Vite, React + Tailwind 3.x + TypeScript.</li>
<li>🚀 <a
href="https://github.com/web2033/vite-vue3-tailwind-starter">Vite + Vue
3.x + Tailwind 2.x Starter</a> - Starter template using Vite, Vue, Vue
Router and Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/running-grass/starter-lit-with-tailwind">Vite +
Lit + Tailwind Starter</a> - Boilerplate using Vite, Lit and Tailwind
CSS.</li>
<li>🚀 <a href="https://github.com/uicrooks/shopify-theme-lab">Shopify
Theme Lab</a> - Shopify theme development starter using Vue and Tailwind
CSS.</li>
<li>🚀 <a
href="https://github.com/Kamona-WD/starter-dashboard-layout">Starter
Dashboard Layout</a> - Dashboard layout using Tailwind CSS and Alpine
JS.</li>
<li>🚀 <a href="https://github.com/abhinavs/cookie">Jekyll Landing
Website Starter</a> - Production ready, SEO-friendly, performant landing
website boilerplate using Jekyll and Tailwind CSS.</li>
<li>🚀 <a href="https://github.com/ixartz/Next-js-Boilerplate">Next JS
Boilerplate</a> - Boilerplate for Next.js and Tailwind CSS.</li>
<li>🚀 <a href="https://github.com/zynth17/vitailse">Vitailse</a> -
Opinionated Vite starter template with Vue 3, TypeScript and Tailwind
CSS.</li>
<li>🚀 <a href="https://github.com/kirklin/vite-boot">Vite-Boot</a> -
Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse
Template.</li>
<li>🚀 <a href="https://github.com/onwidget/astrowind">AstroWind</a> -
Production ready and SEO-friendly template to start a website using
Astro and Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/luciano-work/angular-tailwind">Angular-Tailwind</a>
- Dashboard starter kit using Angular and Tailwind CSS.</li>
<li>🚀 <a
href="https://github.com/luciano-work/vue-resume">Vue-Resume</a> -
Developer resume template with Tailwind CSS and Vue.</li>
</ul>
<h2 id="learning">Learning</h2>
<p><strong>Legend</strong>: 💙 Official resource · 🧪 Sample · 🔧 Setup
Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥
Cast</p>
<ul>
<li>💙🧪 <a
href="https://github.com/tailwindlabs/tailwindcss-plugin-examples">Plugin
Examples</a> - Official plugin examples.</li>
<li>🧪 <a
href="https://github.com/huphtur/tailwind-theme-switcher">Tailwind Dark
Mode Theme Switcher</a> - Switching themes with CSS Custom Properties
and Tailwind CSS.</li>
<li>🧪 <a
href="https://github.com/opdavies/rebuilding-acquia">Acquia</a> -
Acquia’s hosting dashboard rebuilt with Vue.js and Tailwind CSS.</li>
<li>🧪 <a href="https://codepen.io/joshmanders/pen/PQQBoR">Navbar</a> -
Navbar made with Vue.js and Tailwind CSS.</li>
<li>🧪 <a
href="https://github.com/michelegera/tailwindcss-open-template/">“Open”
landing page</a> - “Open” landing page template by Cruip built with
Tailwind CSS Boilerplate.</li>
<li>🔧 <a
href="https://www.oliverdavies.uk/articles/testing-tailwindcss-plugins-with-jest">Testing
Tailwind CSS plugins with Jest</a> - How to test Tailwind CSS plugins
with Jest.</li>
<li>🔧 <a
href="https://medium.com/@AndrewDelPrete/using-tailwindcss-with-css-in-js-32ae6796f95c">Tailwind
CSS with CSS-in-JS</a> - How to use Tailwind CSS with CSS-in-JS.</li>
<li>🔧 <a
href="https://nick-basile.com/blog/post/setting-up-tailwind-in-a-laravel-project">Tailwind
CSS in a Laravel Project</a> - How to setup Tailwind CSS in a Laravel
project.</li>
<li>🔧 <a
href="https://github.com/raytiley/tailwind-ember-example">Tailwind CSS
with Ember</a> - How to add Tailwind CSS to an Ember application.</li>
<li>🔧 <a
href="https://roots.io/guides/how-to-setup-tailwind-css-in-sage">Sage
WordPress theme and Tailwind CSS</a> - How to setup Tailwind CSS in
Sage.</li>
<li>🔧 <a
href="https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj">Tailwind
CSS with GatsbyJS</a> - How to use Tailwind CSS with Gatsby.</li>
<li>🔧 <a
href="https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4">Tailwind
CSS with Phoenix 1.4</a> - How to setup Tailwind CSS in Phoenix
1.4.</li>
<li>🔧 <a
href="https://web-crunch.com/how-to-extend-tailwind-css">Extend Tailwind
CSS</a> - How to Extend Tailwind CSS.</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=ZrRRMBaz5Z0">Rebuilding
Laravel.io</a> - Rebuilding Laravel.io with Tailwind CSS.</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=7gX_ApBeSpQ">Rebuilding
Coinbase</a> - Rebuilding Coinbase with Tailwind CSS [see the <a
href="https://codepen.io/adamwathan/pen/RxWrZr">CodePen</a>].</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=Pg_5Ni1_bg4">Rebuilding
Twitter</a> - Rebuilding Twitter with Tailwind CSS [see the <a
href="https://codepen.io/drehimself/full/vpeVMx">CodePen</a>].</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=qxQKnqmNKv0">Rebuilding
YouTube</a> - Rebuilding YouTube with Tailwind CSS.</li>
<li>🎬 <a
href="https://www.youtube.com/watch?v=_JhTaENzfZQ&amp;t=1263s">Rebuilding
Netlify</a> - Rebuilding Netlify with Tailwind CSS.</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=banq3TfAPYk">Rebuilding
Resolute</a> - Rebuilding Resolute with Tailwind CSS.</li>
<li>🎬 <a
href="https://web-crunch.com/tailwind-css-movie-production-landing-page">Let’s
Build: Movie Production Landing Page</a> - Building a movie production
landing page with Tailwind CSS.</li>
<li>🎬 <a
href="https://web-crunch.com/lets-build-tailwind-css-responsive-navbar">Lets
Build: Responsive Navbar</a> - Building a responsive navbar with
Tailwind CSS.</li>
<li>🎬 <a
href="https://web-crunch.com/lets-build-tailwind-css-dribbble-shot">Let’s
Build: Dribbble Shot</a> - Dribbble shot with Tailwind CSS.</li>
<li>💙🎬 <a
href="https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0">Tailwind
CSS: From Zero to Production</a> - Complete walkthrough of Tailwind CSS,
from installation to optimization for deployment.</li>
<li>🎬 <a
href="https://web-crunch.com/lets-build-tailwind-css-tweet">Let’s Build:
Tweet component</a> - Building a Tweet component with Tailwind CSS.</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=aSlK3GhRuXA">10 Tailwind
CSS Tips and Tricks</a> - 10 Tailwind CSS tricks you should know.</li>
<li>🎬 <a href="https://www.youtube.com/watch?v=xSuxsfn13xg">Responsive
Framer Motion with Tailwind CSS</a> - Learn how CSS variables can bridge
the gap between Framer Motion and Tailwind CSS.</li>
<li>🎓 <a
href="https://codeburst.io/creating-a-modal-dialog-with-tailwind-css-42722c9aea4f">Modal
Dialog</a> - Creating a modal dialog with Tailwind CSS.</li>
<li>🎓 <a
href="https://github.com/asvny/building-realworld-user-interfaces-using-tailwind">Building
real-world UIs using Tailwind CSS</a> - Building UIs of Shopify,
Spotify, Netlify and Atlassian.</li>
<li>🎓 <a
href="https://stefanbauer.me/building-pingping/we-build-a-login-using-tailwindcss">Login
Page (PingPing)</a> - Creating a login page with Tailwind CSS.</li>
<li>🎓 <a
href="https://mustafaaloko.github.io/2017/tailwind-css-building-a-login-page">Login
Page</a> - Creating a login page with Tailwind CSS.</li>
<li>🎓 <a
href="https://nick-basile.com/blog/post/how-to-build-a-vuejs-component-with-tailwind-in-a-laravel-project">Vue.js
Component with Tailwind and Laravel</a> - Building a Vue.js component in
a Laravel project.</li>
<li>🎓 <a
href="https://nick-basile.com/blog/post/build-a-customizable-vuejs-modal-with-tailwind-css">Vue.js
Modal</a> - Building a customizable modal with Tailwind CSS and
Vue.js.</li>
<li>🎓 <a
href="https://nick-basile.com/blog/post/building-a-nav-with-tailwind-css">Navigation</a>
- Building a navigation with Tailwind CSS.</li>
<li>🎓 <a href="https://css-tricks.com/style-form-tailwind-css">Forms
with Tailwind CSS</a> - How to style a form with Tailwind CSS.</li>
<li>🎓 <a
href="https://nick-basile.com/blog/post/building-a-photo-gallery-with-css-grid-and-tailwind-css">Photo
gallery with CSS grids</a> - Building a photo gallery with CSS grids and
Tailwind CSS.</li>
<li>🎓 <a
href="https://www.oliverdavies.uk/articles/rebuilding-bartik-with-vuejs-tailwind-css">Rebuilding
Bartik</a> - Rebuilding Bartik (Drupal’s default theme) with Vue.js and
Tailwind CSS.</li>
<li>🎓 <a
href="https://web-crunch.com/re-create-airbnbs-home-page-with-tailwind-css">Rebuilding
Airbnb’s Home Page</a> - Rebuilding Airbnb’s Home Page with Tailwind
CSS.</li>
<li>🎓 <a
href="https://www.themes.dev/blog/typographic-defaults-in-tailwind-css/">Typographic
defaults in Tailwind CSS</a></li>
<li>🎓 <a
href="https://www.themes.dev/blog/responsive-navigation-menu-tailwind-css/">Create
a responsive navigation menu in Tailwind CSS</a></li>
<li>🎥 <a href="https://www.youtube.com/watch?v=HIPgzWS-Bxg">Laracasts
Weekly Stream: Tailwind</a></li>
<li>🎥 <a href="https://www.youtube.com/watch?v=nBzfVK3QUzM">More
experimentation with Tailwind CSS</a></li>
<li>🎥 <a href="https://youtu.be/SLGb2RLie9w">Rebuilding
Spotify</a></li>
<li>🎥 <a href="https://youtu.be/t54tuaoHVLo">Rebuilding
Discord</a></li>
<li>🎥 <a href="https://youtu.be/ULe6yKJrFuI">Rebuilding Meetup</a></li>
</ul>
<p align="center">
<br /> <br /> · <br /> <br /> <sub>Contributions welcome! Read the
<a href=".github/CONTRIBUTING.md">contribution guidelines</a>
first.</sub>
</p>