Join 37,053 other Developers as we Learn, Build, and Grow Together.

Connect with fellow developers and gain access to tools that will help you build a profitable SaaS πŸš€

Sign Up

Tailwind

Tailwind posts, videos, courses, and more

Laravel Tailwind Boilerplate and Vue ready

Laravel Tailwind Boilerplate and Vue ready

Happy Friday!! This week I was working with a simple GitHub repo to save me time when I start new Laravel projects. The repo it's called Laravel Tailwind Boilerplate & Vue ready It consist in a Initial template to start your Laravel projects from scratch. It's very simple! There are not any extra functionality, no auth, no A...

Marc Garcia

2 months ago

4
Select One:
TailwindCSS 2.2 in 22 seconds

TailwindCSS 2.2 in 22 seconds

Want to learn what's new in TailwindCSS 2.2 in 22 seconds? Maybe that's a little too ambitious πŸ€ͺ. It might be more like 122 seconds. Either way, in this tutorial, you will learn the new things in TailwindCSS 2.2 in a few minutes. Let's dive in! Tailwind CLI πŸ’» With the all-new TailwindCLI, you can now purge your CSS into a single...

Tony Lea

4 months ago

13
Select One:
Create a Dark Mode toggler with Tailwind ⚑️

Create a Dark Mode toggler with Tailwind ⚑️

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'll show you the easiest and the effective way to set up dark mode toggler in your tailwind app. πŸš€. So, be with me! Let's...

Savio Martin

4 months ago

4
Select One:
Set Up Tailwind JIT In React - The fastest way! πŸš€

Set Up Tailwind JIT In React - The fastest way! πŸš€

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something...

Savio Martin

4 months ago

5
Select One:
Set Up Tailwind In React - The fastest way! πŸš€

Set Up Tailwind In React - The fastest way! πŸš€

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something...

Savio Martin

5 months ago

5
Select One:
Extracting TailwindCSS from HTML

Extracting TailwindCSS from HTML

I've recently run into a scenario where I want to design a one-off page using TailwindCSS with the CDN link; however, including the CDN link would mean that my page load is a heavy 3MB πŸ™. Instead of installing Tailwind with one of the recommended installation steps, I decided to use the PurgeCSS CLI to extract only the classes I...

Tony Lea

6 months ago

7
Select One:
TailwindCSS Hidden Gems πŸ’Ž

TailwindCSS Hidden Gems πŸ’Ž

If you are new to TailwindCSS, you're probably familiarizing yourself with some of the utility classes and starting to build some awesome stuff. πŸ˜‰ As you learn about this awesome framework, there may be a few utility classes that you skimmed over. In this tutorial, I want to share with you some awesome utility classes you might...

Tony Lea

7 months ago

7
Select One:
Tailwind CSS - all you need to know to get started

Tailwind CSS - all you need to know to get started

Tailwind CSS is a relatively new CSS framework that can be easily seen as the next big revolution of the way we style our HTML elements. Tailwind encourages and facilitates a utility-first approach where you write as few custom styles as possible and use hundreds of small, low-level utility (or helper) classes instead. For this...

Riccardo Battiato

8 months ago

4
Select One:
Tracing Objects in TailwindCSS

Tracing Objects in TailwindCSS

I've been getting good at designing and painting elements on the page using TailwindCSS. I decided to use a flat laptop image πŸ–ΌοΈ and design it with TailwindCSS. It was actually pretty simple after I figured out the best way to trace elements. Let me share my process. Finding our design First, you'll need to find a design that yo...

Tony Lea

9 months ago

9
Select One:
Custom Animations in TailwindCSS

Custom Animations in TailwindCSS

Tailwind provides some simple animations out of the box. If you're not familiar with these animations, be sure to check out my post on TailwindCSS Animations here. These simple animations are pretty cool; however, we may want to add some custom animations to our websites and applications. That's simple enough πŸ˜‰; let's learn abou...

Tony Lea

9 months ago

7
Select One:
5 reasons to start using TailwindCSS

5 reasons to start using TailwindCSS

It's 2021, and it's time for a change. Bootstrap has held its reign as the top CSS framework for quite some time; however, that's all about to change. TailwindCSS is the cat's pajamas, it's the bee's knees, it's the coolest thing since peanut butter and jelly πŸ‡. If you don't believe me, perhaps this article will change that. Nev...

Tony Lea

9 months ago

9
Select One:
Creating Browser Mockups in TailwindCSS

Creating Browser Mockups in TailwindCSS

TailwindCSS gives us the ability to create some really cool designs. It also gives us the power to create some cool elements on our page, such as browser mockups. You'll learn how to create multiple browser mockups in this quick tutorial in TailwindCSS. Creating the Browser Header We'll create the header by adding a rectangle wi...

Tony Lea

9 months ago

10
Select One:
TailwindCSS, Give Me Some Space

TailwindCSS, Give Me Some Space

Recently, I started using the space utility classes in Tailwind, which gives you the ability to create equal space between elements. When I first started using Tailwind, I found myself reaching for mx-5, my-3, ml-2, and all the other awesome margin utility classes. There was nothing wrong with this; however, there’s a better way...

Tony Lea

10 months ago

5
Select One:
Laravel Quickie: How to install and build TailwindCSS v2 with Laravel Mix 😎

Laravel Quickie: How to install and build TailwindCSS v2 with Laravel Mix 😎

Introduction Welcome to another Laravel Quickie! In this quickie, we will go over how to install and build TailwindCSS v2 with the help of Laravel Mix. If you've already tried and have run into issues, hopefully, this post will solve those issues for you. Prerequisites If you don't already have a Laravel project up and running....

Kim Hallberg

11 months ago

5
Select One:
Tailwind V2 Released πŸŽ‰

Tailwind V2 Released πŸŽ‰

Tailwind version 2.0 has been officially released along with a fancy new website. You gotta check it out, this thing is impressive. There are some pretty cool things available in v2, which include: Focus Ring Feature The Focus Ring will allow you to add some fancy looking outline rings with box-shadow. These focus rings are goo...

Tony Lea

11 months ago

5
Select One:
How to create a Contact Us form with Livewire. πŸ‘‹

How to create a Contact Us form with Livewire. πŸ‘‹

Introduction. The contact form, an essential piece of functionality on every website. From a single input field asking for an email address. To full-page forms with address fields. Used to acquire potential clients and create new leads, or get subscribers to an email list. The contact form contains a multitude of combinations. I...

Kim Hallberg

11 months ago

6
Select One:
TailwindCSS Gradients

TailwindCSS Gradients

As of Tailwind 1.7, you can create gradients without a single line of CSS 🎨. In this tutorial, I'll show you how easy it is to add gradients to your designs using Tailwind. Each gradient will typically have a few colors. It will have a start color and an end color. If you want an additional color added, you can also specify a mi...

Tony Lea

1 year ago

9
Select One:
Creating a Slider with Tailwind CSS

Creating a Slider with Tailwind CSS

Creating a slider with Tailwind and a little bit of javascript is actually very simple and that's what we'll be cover in this tutorial. First, we'll create the HTML and CSS for our slider, and then we will add the slider functionality with a little bit of javascript. Here is a quick example of what we'll create. {% codepen https...

Tony Lea

1 year ago

6
Select One:
Animating Tailwind Transitions on Page Load

Animating Tailwind Transitions on Page Load

Tailwind transitions classes gives you the ability to animate elements with very little effort. The only problem is that you can't implement animations using the transition classes alone. In this tutorial, you will learn how we can solve this with some simple javascript. A Quick Example Take a look at this code, which will toggl...

Tony Lea

1 year ago

5
Select One:
Tailwind 1.7 Release

Tailwind 1.7 Release

Tailwind 1.7 has been released with some really cool new features. Here are some of the cool things you should probably know about the latest version. Gradients I love a good gradient, and now inside of Tailwind 1.7 you can easily add some badass gradient backgrounds to your elements. Take a look at the following example: <di...

Tony Lea

1 year ago

8
Select One:
Creating a Progress Bar with Tailwind

Creating a Progress Bar with Tailwind

TailwindCSS is the bees knees and creating simple elements with Tailwind is really easy. In this quick tutorial, I want to show you how to create a quick progress bar like the following: Adding TailwindCSS Let's start things off with adding the CDN Link to our HTML page and adding a simple <h1></h1> tag like so: &lt...

Tony Lea

1 year ago

12
Select One:
TailwindCSS Animations

TailwindCSS Animations

Tailwind CSS version 1.6 was released last week. This new version does not introduce any new breaking changes, and it gives us some awesome animation utility classes. Animation Classes There are four default animations with the ability to create more. The four default animations provided in version 1.6 are: .animate-spin .an...

Tony Lea

1 year ago

7
Select One:
Create a Simple TailwindCSS Plugin

Create a Simple TailwindCSS Plugin

The TailwindCSS library is amazing. We can create some beautiful user interfaces with their utility and component classes. But, what happens when you need to build some custom solutions? Well then, a TailwindCSS plugin is what you'll need to create. Building a Tailwind plugin will allow you to re-use a custom Tailwind solution a...

Tony Lea

1 year ago

7
Select One:
Getting Started with TailwindCSS

Getting Started with TailwindCSS

Tailwind has been gaining popularity and it's getting picked up by a lot of developers and designers. My hope is that everyone will soon know the awesomeness of this amazing library. So, in this tutorial, I want to show you the simplest way to get a quick taste of the deliciousness of TailwindCSS. But, first, it might help to un...

Tony Lea

1 year ago

8
Select One:
Animations with Alpine

Animations with Alpine

Alpine gives you the ability to implement simple javascript functionality in your application without pulling in a larger library like Vue or React. Some use-cases for using alpine are modal pop-ups or simple drop-downs. And luckily, creating some simple transition animations with Alpine is super easy and fun! Here is your 101 t...

Tony Lea

1 year ago

7
Select One:
Building Apps with the Tall Stack

Building Apps with the Tall Stack

The Tall Stack is a full-stack development solution which combines a set of tools as a way of easily and quickly building applications. The Tall Stack consists of the following: Tailwind Alpine Laravel Livewire Utilizing the Tall Stack will make it easy to build some awesome applications. In this tutorial, I'll show yo...

Tony Lea

1 year ago

10
Select One:
Top 10 TailwindCSS Resources

Top 10 TailwindCSS Resources

Tailwind is quickly becoming one of the most popular CSS libraries in 2020. That means we are also going to get a ton of awesome resources along with Tailwind. In this quick round-up I'll be sharing with you some of the best resources and tools you'll want to keep in your back pocket as you start creating a bunch of Tailwind sit...

Tony Lea

1 year ago

7
Select One:
Why TailwindCSS is Dangerous

Why TailwindCSS is Dangerous

TailwindCSS is dangerous and you should be careful before using this CSS library, but probably not in the way you may be thinking... Let me clarify. Tailwind is dangerous because if you spend time together, you're going to fall in love. That doesn't sound so bad, right? But after falling in love with your new mistress, working o...

Tony Lea

1 year ago

13
Select One:

Loading More Content