Tailwind CSS - A Free Starter built with Eleventy and Tailwind
Tags: tailwindcss, eleventy, appseed
Published: 2020-03-19 14:02:26

---
title: Tailwind CSS - A Free Starter built with Eleventy and Tailwind
published: true
description: An open-source and free starter built with Tailwind CSS Starter Kit and Eleventy SSG
tags: tailwindcss, eleventy, appseed
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-tailwind-starter-intro.gif
---
Hello Coders,

This article presents an open-source and free starter built with **[Tailwind CSS Starter Kit](http://bit.ly/2QsVGNJ)** and **Eleventy SSG**. The project, released under the **MIT license** on Github, scores 99 on Lighthouse and provides a simple set of pages and tools to help any programmer to start fast a simple Tailwind project and see something on the screen in less than 2 minutes. 

*Thank you!* Content provided by **[App Generator](https://appseed.us)**.

--- 

- [Tailwind Starter](https://eleventy-tailwind-starter.appseed.us/) - LIVE Demo
- UI KIT: [Tailwind Starter Kit](http://bit.ly/2QsVGNJ) - provided by *Creative Tim*
- FlowBite **[Tailwind components](https://flowbite.com/docs/getting-started/introduction/)** - free UI Kit

--- 

![Tailwind CSS Starter - Open-Source project built with Tailwind.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-tailwind-starter-screen-4.png)

--- 

## Tailwind CSS

For newcomers, **Tailwind** is a utility-first CSS framework for rapidly building custom user interfaces. This CSS framework is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. 

--- 

## [Tailwind CSS Starter Kit](http://bit.ly/2QsVGNJ) 

This beautiful freebie crafted by **Creative-Tim** does not change or add any CSS to the already one from **TailwindCSS**. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular. 

> Note: The **[Tailwind Starter Kit](https://www.producthunt.com/posts/tailwind-starter-kit)** is now listed on Product Hunt. Those that find the kit useful, feel free to join the **Product Hunt** discussion and talk directly with the makers.

--- 

## How to build the starter

To compile the code, we need a Nodejs environment properly set up in the workstation. To start the app, we need to type only a few lines in the terminal:

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/eleventy-tailwind-starter.git
$ cd eleventy-tailwind-starter
$
$ # Install the dependencies
$ yarn 
$
$ # Star in development mode
$ yarn start # with LIVE reload
$
$ # app is running on http://localhost:8181
$
$ # Production build
$ yarn build #
$ # HTML files are generated in dist folder
```

## Starter Screens

> Landing page

![Tailwind CSS Starter - The landing page.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-tailwind-starter-screen.png)
 
> Profile Page

![Tailwind CSS Starter - The profile page](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-tailwind-starter-screen-3.png)

> Registration Page

![Tailwind CSS Starter - The profile page](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-tailwind-starter-screen-5.png)

---

> Thank you!