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

Thirus March 28, 2022
Video Thumbnail
Thirus Logo

Thirus

@thirus

About

Thirus (pronounced "thigh-rus") is an effort to bring hundreds of simple web development tips and tutorials together that you can consume regularly on your coding journey. I am Shruti Balasa - the owner of this channel. I'm a Full Stack Web Developer, Mentor, Course Creator, Tech Speaker and now a Youtuber from Bangalore, India. Like my content? Buy me a coffee ☕️ https://www.buymeacoffee.com/shrutibalasa CONNECT TO ME: Website: https://www.shrutibalasa.com Twitter: https://twitter.com/shrutibalasa LinkedIn: https://www.linkedin.com/in/shrutibalasa Instagram: https://www.instagram.com/shruti_balasa_thirus Subscribe & Stay tuned for awesome content!

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

You May Also Like

Upgrade Your Everyday

AI-recommended products based on this video

Loading...
Kasa Smart Outdoor Smart Plug by TP-Link (KP400) - Smart WiFi Outlet with 2 Sockets, IP64 Waterproof, Works with Alexa and Google Home, 2.4GHz WiFi Required, No Hub Required, Sunset & Sunrise Offset

Kasa Smart Outdoor Smart Plug by TP-Link (KP400) - Smart WiFi Outlet with 2 Sockets, IP64 Waterproof, Works with Alexa and Google Home, 2.4GHz WiFi Required, No Hub Required, Sunset & Sunrise Offset

(28,846)
$21.99$17.99
FREE delivery Wed, Aug 20 on your first order
1K+ bought in past month
Loading...
Wireless Earbuds Bluetooth 5.4 Headphones, 50H Playtime Stereo Earphones with ENC Noise Cancelling, IPX7 Waterproof Open Ear Buds with Ergonomic Earhook for Fitness/Sports/Workouts Black

Wireless Earbuds Bluetooth 5.4 Headphones, 50H Playtime Stereo Earphones with ENC Noise Cancelling, IPX7 Waterproof Open Ear Buds with Ergonomic Earhook for Fitness/Sports/Workouts Black

(182)
$39.99
Prime
Loading...
Wireless Earbuds, Bluetooth 5.4 Headphones HiFi Stereo with 6 HD Mics, 2025 Active Noise Cancelling Earbuds, 36H Playtime and LED Display in Ear Earphones, IP7 Waterproof Wireless Headphones, Black

Wireless Earbuds, Bluetooth 5.4 Headphones HiFi Stereo with 6 HD Mics, 2025 Active Noise Cancelling Earbuds, 36H Playtime and LED Display in Ear Earphones, IP7 Waterproof Wireless Headphones, Black

(159)
$29.99$26.99
FREE delivery Fri, Jan 2 on your first order
Loading...
Wireless Earbuds, Sports Bluetooth Headphones, 80Hrs Playtime Ear Buds with LED Power Display, Noise Canceling Headset, IPX7 Waterproof Earphones for Workout/Running(Black)

Wireless Earbuds, Sports Bluetooth Headphones, 80Hrs Playtime Ear Buds with LED Power Display, Noise Canceling Headset, IPX7 Waterproof Earphones for Workout/Running(Black)

(421)
$39.99
Prime
1K+ bought in past month
Loading...
Monster Open Ear Headphones AC330, Wireless Earbuds Bluetooth 5.4 with Clear Talk, Stylish Rotating Case with Lanyard, Type-C Charging, Comfort Fit, 24H Playback, IPX5 Water Resistant, Black

Monster Open Ear Headphones AC330, Wireless Earbuds Bluetooth 5.4 with Clear Talk, Stylish Rotating Case with Lanyard, Type-C Charging, Comfort Fit, 24H Playback, IPX5 Water Resistant, Black

(262)
$29.99
FREE delivery Tue, Dec 30 on your first order
500+ bought in past month
Loading...
Brita Stainless Steel Premium Filtering Water Bottle, BPA-Free, Reusable, Insulated, Replaces 300 Plastic Water Bottles, Filter Lasts 2 Months or 40 Gallons, Includes 1 Filter, Carbon - 20 oz.

Brita Stainless Steel Premium Filtering Water Bottle, BPA-Free, Reusable, Insulated, Replaces 300 Plastic Water Bottles, Filter Lasts 2 Months or 40 Gallons, Includes 1 Filter, Carbon - 20 oz.

(2,652)
$81.37$76.36
FREE delivery Sep 29 - Oct 2
Loading...
Simple Modern Filtered Water Bottle | Insulated Stainless-Steel Carbon Filter Travel Water Bottles | Reusable for Clean Drinking Water On The Go | 24oz, Sea Glass Sage

Simple Modern Filtered Water Bottle | Insulated Stainless-Steel Carbon Filter Travel Water Bottles | Reusable for Clean Drinking Water On The Go | 24oz, Sea Glass Sage

(26)
$30.13
FREE delivery Tue, Sep 23 on your first order
Loading...
FITVII Health & Fitness Tracker (Answer/Make Calls), Smart Watch with 24/7 Heart Rate and Blood Pressure, Sleep Tracking Monitor, 120+ Sport Mode Activity Tracker

FITVII Health & Fitness Tracker (Answer/Make Calls), Smart Watch with 24/7 Heart Rate and Blood Pressure, Sleep Tracking Monitor, 120+ Sport Mode Activity Tracker

(198)
$59.99
FREE delivery Sun, Aug 10
100+ bought in past month
Loading...
AYATAHA AYATAHA Smart Watch for Kids, Smartwatch Fitness Tracker for Boys Girls, Children's Activity Watch 37 Sports Modes SMS Notification, HD Full Touchscreen IP67 Waterproof, Blue

AYATAHA AYATAHA Smart Watch for Kids, Smartwatch Fitness Tracker for Boys Girls, Children's Activity Watch 37 Sports Modes SMS Notification, HD Full Touchscreen IP67 Waterproof, Blue

(55)
$41.99
PrimeFREE delivery Sat, Jun 14
Loading...
Iaret Iaret Smart Watch for Women, 1.83" HD Fitness Tracker with 4 Bands, Answer/Make Calls, Heart Rate/Sleep/SpO2/Step Tracking, 100+ Sport Modes, Android/iPhone Compatible Gift (Rose Gold)

Iaret Iaret Smart Watch for Women, 1.83" HD Fitness Tracker with 4 Bands, Answer/Make Calls, Heart Rate/Sleep/SpO2/Step Tracking, 100+ Sport Modes, Android/iPhone Compatible Gift (Rose Gold)

(42)
$59.99
FREE delivery Thu, Jun 19
100+ bought in past month
Loading...
Smart Watch for Men Women 1.8" Fitness Tracker, Bluetooth Call, DIY Dial, Heart Rate Sleep Blood Oxygen Monitor, 100+ Sports Modes, IP68 Waterproof Smartwatch for Android iPhone, Alexa Built-in

Smart Watch for Men Women 1.8" Fitness Tracker, Bluetooth Call, DIY Dial, Heart Rate Sleep Blood Oxygen Monitor, 100+ Sports Modes, IP68 Waterproof Smartwatch for Android iPhone, Alexa Built-in

(980)
$39.99
FREE delivery Sun, Sep 21
300+ bought in past month
Loading...
Hand Warmers 2 Pack, 14000mAh Rechargeable Hand Warmers, Electric Hand Warmer Reusable, Portable Power Bank USB Hand Warmers 4 Levels 8 Heating, Gifts for Raynauds Ski Golf Camping

Hand Warmers 2 Pack, 14000mAh Rechargeable Hand Warmers, Electric Hand Warmer Reusable, Portable Power Bank USB Hand Warmers 4 Levels 8 Heating, Gifts for Raynauds Ski Golf Camping

(683)
$74.08$59.47
FREE delivery Jun 13 - 18
Loading...
Hand Warmers Rechargeable, 10000mAh Electric Heated Gloves Power Bank Portable Graphene Handwarmers Pouch with 3 Levels & Double-Sided Heating for Hunting Camping Golf Xmas Gifts for Women Men Kids

Hand Warmers Rechargeable, 10000mAh Electric Heated Gloves Power Bank Portable Graphene Handwarmers Pouch with 3 Levels & Double-Sided Heating for Hunting Camping Golf Xmas Gifts for Women Men Kids

(651)
$44.99
PrimeFREE delivery Sun, Jun 15
Loading...
2Pack Rechargeable Hand Warmer, 8000mAh Electric Hand Warmer Power Bank, Portable USB-C Hand Warmer for Pocket, Reusable Hand Warmer Up to 8 hrs Each, Warm Gift for Men Women, for Hunting, Camping
Amazon's Choice

2Pack Rechargeable Hand Warmer, 8000mAh Electric Hand Warmer Power Bank, Portable USB-C Hand Warmer for Pocket, Reusable Hand Warmer Up to 8 hrs Each, Warm Gift for Men Women, for Hunting, Camping

(1,128)
$15.99
FREE delivery Sat, Jun 14 on your first order
Loading...
GTOCE Portable Charger,40000mAh Power Bank with 22.5W Fast Charging LED Digital Display Battery Pack with 6 Outputs 2 Inputs, Type C Powerbank Portable Charger for iPhone 16 pro Samsung AirPods,Black

GTOCE Portable Charger,40000mAh Power Bank with 22.5W Fast Charging LED Digital Display Battery Pack with 6 Outputs 2 Inputs, Type C Powerbank Portable Charger for iPhone 16 pro Samsung AirPods,Black

(334)
$42.99
FREE delivery Thu, Oct 16
1K+ bought in past month
Loading...
Monster Sleep Ear100 Ear Buds, Sleep Earbuds with Stereo Sound, Design for Side Sleeper, 32H Playtime, Bluetooth 6.0, ENC Noise Cancelling, IPX6 Waterproof Mini Headphones, Black

Monster Sleep Ear100 Ear Buds, Sleep Earbuds with Stereo Sound, Design for Side Sleeper, 32H Playtime, Bluetooth 6.0, ENC Noise Cancelling, IPX6 Waterproof Mini Headphones, Black

(6)
$39.99
FREE delivery Sat, Dec 27
Loading...
Hydroponics Growing System Indoor Garden - Herb Garden with Grow Light, 15 Pods Stainless Steel Indoor Garden Kit, Auto Timer, Gardening Gift for All Ages

Hydroponics Growing System Indoor Garden - Herb Garden with Grow Light, 15 Pods Stainless Steel Indoor Garden Kit, Auto Timer, Gardening Gift for All Ages

(24)
$206.57$200.61
FREE delivery Jun 13 - 17
Loading...
Umbra Triflora Hanging Planter for Window, Indoor Herb Garden, Set of 5, White/Black

Umbra Triflora Hanging Planter for Window, Indoor Herb Garden, Set of 5, White/Black

(7,808)
$71.52
PrimeFREE delivery Sat, Jun 14
Loading...
Large Hydroponics Growing System 14 Pods, Indoor Herb Garden with LED Grow Light, 5L Water Tank, Hydroponic Grow Kit with 3 Auto-Timers, Rotatable Light Panel and Child Lock for Home School Gardening

Large Hydroponics Growing System 14 Pods, Indoor Herb Garden with LED Grow Light, 5L Water Tank, Hydroponic Grow Kit with 3 Auto-Timers, Rotatable Light Panel and Child Lock for Home School Gardening

(119)
$167.81
FREE delivery Jun 16 - 20
Loading...
Hanging Planter Hanging Plant Holder, 6 Inch 4 Indoor Plant Pots, Wall/Window Plant Hanger Indoor Herb Garden

Hanging Planter Hanging Plant Holder, 6 Inch 4 Indoor Plant Pots, Wall/Window Plant Hanger Indoor Herb Garden

(269)
$35.99$28.90
PrimeFREE delivery Sat, Jun 14
Loading...
slopehill Multi Hair Stylers & Hair Straightener - 2 in 1 Wet to Dry Air Straightener and Hair Dryer Combo with High Speed Air + Rapid Heat-Up + Customizable Temperature(Pink)

slopehill Multi Hair Stylers & Hair Straightener - 2 in 1 Wet to Dry Air Straightener and Hair Dryer Combo with High Speed Air + Rapid Heat-Up + Customizable Temperature(Pink)

(177)
$139.99
Prime
Loading...
Hi.FANCY Portable Laptop Stand with Dual Cooling Fans for 14-17inch Laptops, Grey, 23.5 x 25.9 x 0.95cm

Hi.FANCY Portable Laptop Stand with Dual Cooling Fans for 14-17inch Laptops, Grey, 23.5 x 25.9 x 0.95cm

(0)
$36.99
FREE delivery Aug 18 - 28
Loading...
Laptop Stand for Desk, Adjustable Laptop Riser ABS+Silicone Foldable Portable Laptop Holder, Ventilated Cooling Notebook Stand for 10-15.6” Laptops,Tablet-Black

Laptop Stand for Desk, Adjustable Laptop Riser ABS+Silicone Foldable Portable Laptop Holder, Ventilated Cooling Notebook Stand for 10-15.6” Laptops,Tablet-Black

(11,679)
$14.99
FREE delivery Sat, Jun 14 on your first order
500+ bought in past month
Loading...
JETech 5 in 1 Case for Samsung Galaxy S25 Ultra 5G with 2-Pack Each Tempered Glass Screen Protector and Camera Lens Protector, Non-Yellowing Shockproof Bumper Phone Cover (Clear)

JETech 5 in 1 Case for Samsung Galaxy S25 Ultra 5G with 2-Pack Each Tempered Glass Screen Protector and Camera Lens Protector, Non-Yellowing Shockproof Bumper Phone Cover (Clear)

(197)
$15.99
FREE delivery Sat, Jun 14 on your first order
100+ bought in past month
Loading...
TAURI for iPhone 17 Pro Max Case 6.9" with 1-Pack Screen Protector, Camera Lens Full Protection, Military-Grade Protection, Shockproof Transparent Back Bumper Phone Cover - Clear Global Recycled Standard

TAURI for iPhone 17 Pro Max Case 6.9" with 1-Pack Screen Protector, Camera Lens Full Protection, Military-Grade Protection, Shockproof Transparent Back Bumper Phone Cover - Clear Global Recycled Standard

(0)
$10.76
FREE delivery Thu, Oct 16 on your first order
2K+ bought in past month
Loading...
TAURI for iPhone 17 Pro Case 6.3" with 1-Pack Screen Protector, Camera Lens Full Protection, Military-Grade Protection, Shockproof Transparent Back Bumper Phone Cover - Clear Global Recycled Standard
Best Seller

TAURI for iPhone 17 Pro Case 6.3" with 1-Pack Screen Protector, Camera Lens Full Protection, Military-Grade Protection, Shockproof Transparent Back Bumper Phone Cover - Clear Global Recycled Standard

(61,696)
$10.76
Prime
2K+ bought in past month
Loading...
JOINPAYA 1Set Rechargeable Hand Warmer Hand Heater for Winter Heating Levels Compact

JOINPAYA 1Set Rechargeable Hand Warmer Hand Heater for Winter Heating Levels Compact

(0)
$9.29
FREE delivery Jun 20 - Jul 4
Loading...
Shakven Rechargeable Hand Warmer | Cute Comfortable Portable Hand Warmers,Ergonomic Adjustable Energy-Efficient Small Heater for Travel, Outdoor, Winter

Shakven Rechargeable Hand Warmer | Cute Comfortable Portable Hand Warmers,Ergonomic Adjustable Energy-Efficient Small Heater for Travel, Outdoor, Winter

(0)
$26.93
FREE delivery Jun 19 - Jul 2
Loading...
OCOOPA IP45 Waterproof Hand Warmer Rechargeable, Up to 15hrs Heat,10000mAh Durable Quick Charge Electric Hand Heater, PD Compatible, 3 Levels for Outdoors, Heavy Duty, H01-PD PRO

OCOOPA IP45 Waterproof Hand Warmer Rechargeable, Up to 15hrs Heat,10000mAh Durable Quick Charge Electric Hand Heater, PD Compatible, 3 Levels for Outdoors, Heavy Duty, H01-PD PRO

(50)
$39.99
PrimeFREE delivery Sat, Jun 14
Loading...
OCOOPA IP45 Waterproof Hand Warmer Rechargeable, Up to 15hrs Heat,10000mAh Durable Quick Charge Electric Hand Heater, PD Compatible, 3 Levels for Outdoors, Heavy Duty, H01-PD PRO

OCOOPA IP45 Waterproof Hand Warmer Rechargeable, Up to 15hrs Heat,10000mAh Durable Quick Charge Electric Hand Heater, PD Compatible, 3 Levels for Outdoors, Heavy Duty, H01-PD PRO

(649)
$39.99
PrimeFREE delivery Sat, Jun 14