Tailwindcss

Tailwindcss posts, videos, courses, and more

Tony Lea

2 weeks ago

View Post

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...
Extracting TailwindCSS from HTML
7
Select One:

Tony Lea

1 month ago

View Post

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...
TailwindCSS Hidden Gems πŸ’Ž
7
Select One:

Riccardo Battiato

2 months ago

View Post

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...
Tailwind CSS - all you need to know to get started
3
Select One:

Tony Lea

3 months ago

View Post

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...
Tracing Objects in TailwindCSS
9
Select One:

Tony Lea

3 months ago

View Post

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...
Custom Animations in TailwindCSS
7
Select One:

Tony Lea

3 months ago

View Post

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...
5 reasons to start using TailwindCSS
9
Select One:

Tony Lea

3 months ago

View Post

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...
Creating Browser Mockups in TailwindCSS
10
Select One:

Tony Lea

4 months ago

View Post

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...
TailwindCSS, Give Me Some Space
5
Select One:

Tony Lea

4 months ago

View Post

Create a Blog in Laravel and Livewire

In this tutorial, we are going to walk-through creating a simple blog in Laravel and Livewire. It will be pretty simple and can be used as a starting point for building your blog with these awesome frameworks. To kick things off, we'll start by creating our new laravel application. Create a new Laravel app First, we'll create a...
Create a Blog in Laravel and Livewire
5
Select One:

Tony Lea

5 months ago

View Post

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...
Tailwind V2 Released πŸŽ‰
5
Select One:

Kim Hallberg

5 months ago

View Post

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...
How to create a Contact Us form with Livewire. πŸ‘‹
6
Select One:

Tony Lea

7 months ago

View Post

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...
TailwindCSS Gradients
9
Select One:

Sunil Joshi

7 months ago

View Post

Setting up TailwindCss in Angular 10

Tailwind CSS is a highly customizable, Utility CSS framework that gives you all of the building blocks you need to build designs without any annoying opinionated styles you have to fight to override. In this article we will be setting up tailwindCss in Angular 10. If you dont have Angular 10 running on your local machine you can...
Setting up TailwindCss in Angular 10
5
Select One:

Tony Lea

7 months ago

View Post

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...
Creating a Slider with Tailwind CSS
6
Select One:

Tony Lea

7 months ago

View Post

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...
Animating Tailwind Transitions on Page Load
5
Select One:

Tony Lea

8 months ago

View Post

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...
Tailwind 1.7 Release
8
Select One:

Tony Lea

8 months ago

View Post

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...
Creating a Progress Bar with Tailwind
12
Select One:

Tony Lea

8 months ago

View Post

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...
TailwindCSS Animations
7
Select One:

Tony Lea

8 months ago

View Post

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...
Create a Simple TailwindCSS Plugin
7
Select One:

Tony Lea

9 months ago

View Post

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...
Getting Started with TailwindCSS
8
Select One:

Tony Lea

9 months ago

View Post

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...
Building Apps with the Tall Stack
9
Select One:

Tony Lea

9 months ago

View Post

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...
Top 10 TailwindCSS Resources
7
Select One:

Tony Lea

9 months ago

View Post

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...
Why TailwindCSS is Dangerous
13
Select One:

Loading More Content

Back to DevDojo