10 Free and Open-sourced Tailwind CSS Templates
Tags: webdev, css, beginners, productivity
Published: 2021-03-25 14:46:51

👋 Hello Dev fam!
<p></p>
I had a mini list of some free, open-sourced templates of Tailwind, so thought why not share with the community here, might come useful for someone. So here it is!
<p></p>
But first, those who don't know what Tailwind CSS is, it's a __low-level CSS framework__ that lets you build completely custom user interfaces without having to override any predefined components or styles. 
<p></p>
Some other CSS frameworks (e.g.: Bootstrap) come with predefined components such as cards, buttons and so on, which might be useful at first since they help you build sites quickly, but can cause a lot of pain when you are trying to customize your site.
<p></p>
Tailwind on the other hand provides you with __low-level utility classes__ to use wherever you want, which gives you the freedom to build fully customized designs to your taste and specifications.
<p></p>
#### Here we go!####
<p></p>
<br>
### ☄️[Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation) ###
<p></p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsx0tw3m05y2cv1897ev.png)
 
This is a free and open-source template that features multiple HTML elements, and dynamic components for React, Vue, and Angular. To get it, simply go to the [website](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation) and click on “Get Started” to see the documentation and download links. You can also check out its [GitHub repo.](https://github.com/creativetimofficial/tailwind-starter-kit)
<br>
### ☄️[Simple Light - Landing Page template](https://simple.cruip.com/)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hgf9rb8mmsxlwk5mktt.png)
 
This free landing page template is built with TailwindCSS and React. It is designed to provide all the basic components a developer needs to create a landing page for SaaS products, online services, and more. To clone it and get started, check out its [Github repo](https://github.com/cruip/tailwind-landing-page-template)
<br>

### ☄️[Gatsby-Emotion-Tailwind Starter Kit](https://gatsby-emotion-tailwind-starter.netlify.app/)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/totxggd94y9d0nw4wtmf.png)
 

This template is made with Gatsby.js, Emotion, and Tailwind CSS. It contains cool features such as lazy-loading images, code-splitting, and offline support. Check out its [Github repo](https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter for more details.

### ☄️[Admin dashboard template](https://davidgrzyb.com/tailwind-admin-dashboard-template)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ilq38s1metpfa5ve7w7.png)
 
This is a free and open-source Admin Dashboard Template built with Tailwind CSS and Alpine.js. You can check it out on its [website](https://davidgrzyb.com/tailwind-admin-dashboard-template) , or go straight to its [GitHub repo.](https://github.com/davidgrzyb/tailwind-admin-template)

<br>

###☄️ [Tailwind Toolbox - Landing Page Template](https://tailwindtoolbox.github.io/Landing-Page)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6hzwr55qlrbkc3ge7p5.png)
 
This is a generic, open-source landing page template for Tailwind CSS created by Tailwind Toolbox.[GitHub](https://github.com/tailwindtoolbox/Landing-Page)
<br>
### ☄️[Landmark by DevDojo](https://devdojo.com/tailwindcss/template/landmark)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1eyrygvsnocetjmilqc.png)
 
This beautiful landing page template by DevDojo is built with only HTML and Tailwind CSS. [Go to its website](https://devdojo.com/tailwindcss/templates) to see the template and copy its source-code, or check it out on [GitHub.](https://github.com/thedevdojo/tails)
<p>

### ☄️[Cleopatra - Admin dashboard template](https://moesaid.github.io/cleopatra/)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mlj1mxk4js5knrat9hz.png)
 
A clean and minimal Admin dashboard template created with Tailwind CSS. This template is carefully coded with clear comments to help you easily understand its source code, and quickly get started building nice dashboards. Check out its [GitHub repo](https://github.com/moesaid/cleopatra) to clone and get started.
<br>
### ☄️[V-Dashboard - Vue Admin Dashboard template](https://v-dashboard.vercel.app/)
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krq7w782fpv8mn2hlhxg.png)
 
This dashboard starter template is built with Vite, Vue 3, Tailwind CSS and TypeScript. You can check it out on [Github](https://github.com/wobsoriano/v-dashboard) and clone it to get started.
<br>
### ☄️[Ghostwind - Starter Blog Template]()
<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kz4qqnwtormk5h4ogq4.png)
 
This is a simple blog template created with Tailwind CSS, based on a popular Ghost theme named Casper. Check out its [Github](https://github.com/tailwindtoolbox/Ghostwind) repo for more details.
<br>

### ☄️[SaaS Landing Page](https://www.themes.dev/library/tailwindcss-saas-landing-page/)

<p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypo07zbn0xqzv6ajcol0.png)
 
Beautiful, designed landing page for your SaaS. It comes in a dark and light version. The landing page is made with Tailwind CSS and optimized for mobile, tablet and desktop use. Icons included in these designs are from the awesome heroicons library
<p>
🌱 That's it for now. Do you have any other resources related to Tailwind CSS? Let me know in the comments!

PS: You might want to check out my other posts:
{% post https://dev.to/exwhyzed/how-to-git-a-complete-beginners-guide-1h85 %}
{% post https://dev.to/exwhyzed/clubhouse-s-android-version-fb-developer-conference-and-more-ib1 %}
<BR>
__Adios!__