Build a Simple Static Website with Eleventy and Tailwind CSS and Deploy to Netlify - Part 1

Video Description

Tailwind CSS makes it very quick to style web pages. However, the most common complaints devs have with Tailwind CSS is that: 1. It’s hard to look at the huge list of class names in the markup. Especially for simple websites, if we don’t use any frameworks, there’s no way to create components. So, all the markup ends up in a single file and this definitely looks messy! 2. Without using components, code is repeated - which means - repeating all the utility classes making it less maintainable.Now these are the two problems that can be solved using the static site generator - Eleventy along with a templating engine called Nunjucks. 0:00 Introduction 2:52 Install Eleventy 3:45 Hello World in Eleventy 6:27 Styling in Eleventy using regular CSS 7:38 Eleventy Configuration File 9:24 Install Tailwind CSS in Eleventy 10:58 Tailwind CSS Config for Eleventy 12:21 Build Tailwind CSS in Eleventy 14:46 Start Project - Two-page Static Website 15:18 Create layouts in Eleventy 18:52 Create and reuse partials like header and footer 19:42 Include files in Eleventy 27:28 Include sections from different files 33:20 Macros in Eleventy for components 40:11 Adding another page in Eleventy 41:42 Highlighting current page menu item using if statements 45:04 Quick summary Part 2 - Deploy to Netlify https://www.youtube.com/watch?v=rsAJ5beQlpc Github Repository: https://github.com/ThirusOfficial/eleventy-tailwind Subscribe and stay tuned for tips, tutorials and more. Follow me on Twitter: https://twitter.com/shrutibalasa Follow Thirus on Twitter: https://twitter.com/thirusOfficial Visit my website: https://www.shrutibalasa.com #tailwind #tailwindcss #eleventy