Tailwind CSS - Open-Source Components
Tags: tailwindcss, opensource, appseed
Published: 2020-03-20 19:33:44

---
title: Tailwind CSS - Open-Source Components
published: true
description: Open-source components for Tailwind CSS, released under the MIT license.
cover_image: https://raw.githubusercontent.com/app-generator/static/master/tailwind-css/tailwind-css-components-intro.gif
tags: tailwindcss, opensource, appseed
---
Hello Coders, 

If you're using **[Tailwind CSS](https://tailwindcss.com/)** in your development, or plan to use, might be a good idea to spare a few minutes of your time and look at this [open-source](https://github.com/app-generator/tailwind-css-components) library with more than 50 components styled with **Tailwind CSS**, and released under the MIT license. **Thanks for reading**! Please let me know your thoughts in the comments. *Thanks for reading!* 

- [Source Code](https://github.com/app-generator/tailwind-css-components) - published on Github
- FlowBite **[Tailwind components](https://flowbite.com/docs/getting-started/introduction/)** - free UI Kit
- 👉 [Material Tailwind](https://www.material-tailwind.com/) - `open-source` library

![Tailwind CSS Components - Admin Dashboards.](https://raw.githubusercontent.com/app-generator/static/master/tailwind-css/tailwind-css-admin-page.png)

---

## What is [Tailwind CSS](https://tailwindcss.com/)

Tailwind CSS is different from frameworks like Bootstrap, Foundation, or Bulma because it is not a UI kit, and it does not have default themes or built-in UI components. It is a very powerful framework in terms of customization, of course, if you don’t mind the repetition in your markup, because you can make any website you can imagine.

According to the official website, it is a utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives developers all of the building blocks they need to build bespoke designs without any annoying opinionated styles.

---

## What's in the box

Components are grouped by visual usability criteria (footer, hero, navbar ..), and styled directly on top of **Tailwind CSS** (no Javascript dependency) as [pug](https://pugjs.org/api/getting-started.html) templates, which makes them very easy to extend and customize.  

---

## How to use the project

To use the components library open a terminal and type:

```
# Clone the repo
$ git clone https://github.com/app-generator/tailwind-css-components.git
$ cd tailwind-css-components
$
$ # Install dependencies
$ yarn
$
$ # Run dev server with live preview (Browsersync)
$ yarn start 
$
$ # Or make a production build
$ yarn build
$
$ # HTML files generated in directory public 
``` 

---

## Components

Here is a shortlist, to visualize the full library please access [Tailwind CSS - Components](https://tailwind-css-components.appseed.us/) online. 

 - [Admin](https://tailwind-css-components.appseed.us/page-admin.html)
 - [Blog](https://tailwind-css-components.appseed.us/page-blog.html)
 - [eCommerce](https://tailwind-css-components.appseed.us/page-ecommerce.html)
 - [FAQ's](https://tailwind-css-components.appseed.us/faq.html)
 - [Gallery](https://tailwind-css-components.appseed.us/gallery.html)
 - [Portfolio](https://tailwind-css-components.appseed.us/portfolio.html)

--- 

## Screen Shots

> Blog Posts Components

![Tailwind CSS Components - Blog Posts.](https://raw.githubusercontent.com/app-generator/static/master/tailwind-css/tailwind-css-blog-posts-components.png)

> Server Errors Page

![Tailwind CSS Components - Server Errors Page.](https://raw.githubusercontent.com/app-generator/static/master/tailwind-css/tailwind-css-page-error.png) 

> Pricing Components

![Tailwind CSS Components - Server Errors Page](https://raw.githubusercontent.com/app-generator/static/master/tailwind-css/tailwind-css-pricing-components.png)

---

### Links & Resources

- [Tailwind CSS](https://tailwindcss.com/) - the official website
- [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/#/presentation) - A beautiful extension for TailwindCSS crafted by **Creative-Tim**
- [Tailwind CSS Components](https://github.com/app-generator/tailwind-css-components) - The Source code, published on Github

--- 

> Thank you!