loading...
Cover image for Tailwind CSS - A Free Starter built with Eleventy and Tailwind

Tailwind CSS - A Free Starter built with Eleventy and Tailwind

sm0ke profile image Sm0ke ・2 min read

Hello Coders,

This article presents an open-source and free starter built with Tailwind CSS Starter Kit 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.

Thanks for reading and let me know your thoughts in the comments.

Tailwind CSS Starter - Open-Source project built with Tailwind.


Tailwind Starter - credits and links


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

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 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:

$ # 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.

Profile Page

Tailwind CSS Starter - The profile page

Registration Page

Tailwind CSS Starter - The profile page


Thank you!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide