tailwindcss.md

tailwindcss

Let's learn about Tailwindcss via these 50 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the /Learn or LearnRepo.com to find the most read blog posts about any technology.

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It matters because it accelerates front-end development by providing low-level utility classes directly in HTML, reducing context switching and promoting consistency.

1. How to Centre an Element in CSS with Tailwind

In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind.

2. Storing and Retrieving Data in Next.js Using LocalStorage and TypeScript

Want to persist data in Next.js without using a lib or any third parties to achieve that, and still have the data not change or reset after refresh?

3. Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Learn to create a Full Stack Airbnb Clone with Amplication: Low-code Next.js frontend, Tailwind CSS styling, JWT-based auth, Mapbox API maps, and more.

4. Tailwindcss? I'll Pass

Tailwindcss is breaking the frontier of CSS libraries and frameworks. Bootstrap is lagging behind and Vanilla CSS is stationary. Is Tailwind CSS worth it?

5. How to Get Started with Flowbite, an Open Source Tailwind CSS component Library

Learn how to install and get started with Flowbite, an open-source component library built on top of the Tailwind CSS utility classes.

6. Introducing Tailwind CSS: Pros and Cons of Tailwind

As you might notice, Tailwind CSS has become popular among the developer community. I'm a big Tailwind fan and recently, I've built several React projects with Tailwind CSS. In this article, I'll describe why Tailwind CSS has brought so much value to the front-end development community.

7. Creating Effective And Optimized Next.JS Reusable Components.

Learn to create reusable components in React for better code organization and maintenance, using ComponentProps and HTMLAttributes interfaces for adaptability..

8. Create a Gradient Border With TailwindCSS and React

This blog post is a small tutorial in which I show you how you can create a gradient border blog card using Tailwind CSS.

9. How to Simplify Tailwind CSS Using ESLint, Tagged Template Literals, and More!

We did this for our customers and internal users (ease of use) as well as our product team (easier design process, decision-making, and coding).

10. Creating a React Form Repeater Component: A Step-by-Step Guide

Learn how to create a React Form Repeater Component,

11. How To Make A Great Looking Website Even If You Can't Design

Making websites work and making websites look great are two different skills. Even so, here are some basic guidelines that ensure that your website looks great.

12. An Essential Guide to Adding TailwindCSS to your Hugo Site

In this tutorial, we will learn how to add TailwindCSS to a Hugo project. Get everything wired up in just a few minutes with Div Rhino.

13. Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application

NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project.

14. A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

Explore a world of web development innovation with full-stack clones of popular apps, from Amazon to WhatsApp. Discover endless possibilities in tech!

15. How a Beginner Created and Deployed a WebApp in 4 Days

How I created and deployed a WebApp in 4 days after learning to code.

16. How to Use NextJS, TypeScript, Tailwind, and OneEntry CMS to Build an eCommerce Store 🛒👨‍💻

We will build a practical eCommerce project to see how NextJS, TypeScript, Tailwind CSS, and OneEntry CMS can be used to simplify content management.

17. Authenticate Your Users Using Facial Recognition With FaceIO, Next.JS and Tailwind CSS

FaceIO is a facial authentication framework that can easily be integrated into any website or web app using a simple JavaScript snippet.

18. Building a Full Stack NFT Minting DApp Using Hardhat, Ethers.js, Next.js, and TailwindCSS

Building a Full Stack NFT minting Dapp using Hardhat, ethers.js, Next.js, and TailwindCSS

19. Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More.

This Amazon Clone features a wide range of technologies and functionalities, including Next.js, Tailwind CSS, Zustand, Typescript, Prisma and Amplicaiton

20. 7 Fun Tailwind CSS Button Designs to Improve Your Workflow

Buttons are the most basic element we love to neglect, but buttons don't have to be boring. Here are 7 spicy button designs using Tailwind CSS.

21. React Context API login example using FaceIO for face authentication.

React.js, typescript tutorial showing how to add facial recognition to a website using FaceIO.

22. My New Junior Developer Kinda Sucks

ChatGPT is all the rage these days. Is it really that good for developers though?

23. Sveltekit and Appwrite Cloud: How to build a list app

Learn how to use Appwrite’s API and Svelte to create a list app with features like task creation and deletion and storing the data in Appwrite Cloud.

24. 10 Reasons To Use TailwindCSS In Your Next Project

Tailwind as a framework is designed for optimum performance and fewer style clashes. Learn 10 reasons to choose Tailwind CSS for your next project.

25. Top 3 React UI Component & Asset Libraries in 2021

I’m going to condense down years of trial and error and give you my top three React libraries to help you make beautiful websites and apps.

26. How to Build a Github User Finder App With Next.js & Tailwind CSS

In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework.

27. Design Once, Reuse Everywhere — How I Built a Custom Shadcn UI Registry with Next.js and Vercel

Build and deploy a public shadcn/ui registry on Next.js & Vercel—covering setup, registry.json, cssVars, deps, and quick CLI install.

28. Tail-kit Introduction: 200+ Free Tailwind CSS Components And Templates

Free and open source Tailwind css 2.0 components and templates KIT for React, vueJS and Angular.

29. What You Need to Know About Tailwind CSS

30. React UI Development: Real-Time Visualization with Codux

This article teaches you how to build a generative AI application that generates images from user prompts with React and a visual IDE for React.

31. TwNFT - Mint your tweets as NFTs easily and for free

In this post, I introduce TwNFT, an application that lets you mint your tweets as NFTs easily and for free and explain how it works and how I made it.

32. Take Your Tailwind Skills to the Next Level by Using these Resources

Must have Tailwind CSS resources to maximize your productivity. VS Code extensions, plugins, component libraries that you must bookmark to code more efficiently

33. How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone

This blog post demonstrates how to integrate Zegocloud's services for Video Call and Voice Call functionality into a Full Stack WhatsApp Clone.

34. How to Deploy Go + Templ + HTMX + TailwindCSS to Production

In this article, I will be showing you how to deploy the GoTTH stack (Go Templ htmx tailwind) to production.

35. Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible

Learn how to deploy an Amazon Clone application on Aptible, a secure and scalable cloud infrastructure platform.

36. 6 Tailwind CSS Productivity Hacks Every Developer Should Know

While Tailwind is already a powerful tool, there are ways to make it even more efficient.

37. Why I Switched To Tailwind For Writing CSS

TailwindCSS is a highly customizable, low-level CSS framework. Here are my reasons why I decided to switch from normal CSS to Tailwind CSS for my work.

38. An Introductory Guide to Tailwind and React: Setup and Design Patterns

You've probably heard of Tailwind by now, but if you haven't, it is essentially a utility-first CSS framework and is much less opinionated compared to other CSS frameworks like Bootstrap and Foundation.

39. 4 Tailwind CSS Options For Premium Templates & Components

Tired of your website looking like every other Tailwind website? Here are 4 templates that will make you stand out without learning design.

40. Tailwind CSS v4 Beta, New React Framework, BEST JavaScript Animations, and More - This Week in JS

Today, we’ll take a look at the latest Tailwind CSS v4 Beta and explore Tuono’s Rust-powered backends.

41. A Complete Introduction to TailwindCSS

This blog discusses CSS prerequisites and use cases for Tailwind CSS. It is helpful for anyone who's getting started with Tailwind CSS.

42. How to Add Typing Effects to Your React App with React Typical

Learn how to create a dynamic typing effect in your React app using react-typical and Tailwind CSS.

43. Mastering Modern UI Development with React and Tailwind CSS

Learn to build responsive and maintainable user interfaces with React and Tailwind CSS in this comprehensive guide.

44. Building a Logo Creation App with Next.js, Shadcn/ui, and Lucide React

Learn how to build a customizable logo builder app with Next.js, shadcn/ui, html2canvas-pro, and Lucide Icons. Follow our step-by-step guide to create and perso

45. Turn Your Website into a Marketplace with Commerce Layer and JavaScript

A step-by-step tutorial to learn how to make a simple ecommerce product page with static content shoppable using Commerce Layer's Drop-in Javascript library.

46. Why Functional CSS Got so Popular?

Functional CSS is a popular approach in today's web development. A brief history and insights into how it got its popularity.

47. My Journey Building an Open Source Project

Sidi details their open-source journey and where they are now.

48. December Brings Free GitHub Copilot

The State of JavaScript 2024 report, unpacking Tailwind CSS 4 updates that’ll make your styles fly, and serving up fresh tools to streamline your dev grind.

49. Finally, a Tailwind Debugger That Lives in Your Browser

Tail Lens lets you live-edit classes, preview changes instantly, and stay in flow—no alt-tabbing.

50. My Journey With Flow: From ICO to Blockchain Hackathon Season 2

Dive into the journey of a crypto enthusiast who invested in Flow during its ICO and later participated in a Flow hackathon.