I WISH I Knew These Tailwind Tips Earlier

Summary

This video offers invaluable tips for efficiently using Tailwind CSS, a popular utility-first CSS framework. The speaker emphasizes the importance of utilizing cheat sheets, keeping things simple with copy-pasting and avoiding unnecessary abstractions, leveraging the Tailwind prettier auto-sorting plugin for better maintainability and debugging, and refraining from overriding Tailwind's default behavior through excessive config modifications. The advice, grounded in personal experience, aims to help developers embrace Tailwind's simplicity, expedite their learning curve, and avoid common pitfalls, ultimately enhancing productivity and ensuring a seamless Tailwind experience.

Takeaways

• 📈 Use Tailwind CSS cheat sheets to quickly learn the syntax and convert CSS to Tailwind classes efficiently.
• 🔧 Keep your code simple when using Tailwind. Avoid overcomplicating with unnecessary patterns or abstractions.
• 📌 Embrace copying and pasting class names for similar elements instead of overly abstracting. Tailwind's simplicity makes it manageable.
• 📝 Utilize editor and language features, like multi-cursor editing, to efficiently update multiple instances of Tailwind classes.
• 🛠 Avoid using the @apply directive excessively as it can lead to complications and detracts from Tailwind's benefits.
• 📍 Order your Tailwind classes thoughtfully. Use the Tailwind Prettier plugin for auto-sorting to improve maintainability and avoid CSS conflicts.
• 💡 Recognize that the order of CSS classes in the stylesheet matters more than their order in HTML for styling precedence.
• 📚 Do not fear duplication in Tailwind. Repeating class names can be more straightforward and maintainable than creating unnecessary abstractions.
• 💾 Feel free to copy and paste Tailwind styles across different projects due to its consistent syntax, enhancing reusability.
• 🔨 Minimize modifications in the Tailwind config. Focus on adding rather than altering existing settings to maintain simplicity and avoid issues.

Q & A

What is the first tip the speaker recommends for learning Tailwind CSS?

The first tip is to use cheat sheets, especially if you already know CSS. Cheat sheets can help you quickly find the corresponding Tailwind classes for specific CSS properties, making the transition to Tailwind syntax easier.

Why does the speaker recommend keeping things simple when working with Tailwind CSS?

The speaker encourages keeping things simple because Tailwind CSS is designed to be simple and straightforward. Instead of enforcing a complex system or specific architecture, Tailwind CSS allows you to copy and paste class names as needed, without worrying too much about reusing styles.

What does the speaker say about the 'apply' feature in Tailwind CSS?

The speaker recommends not using the 'apply' feature, which allows you to write Tailwind classes inside a CSS file. The creator of Tailwind CSS himself regrets adding this feature, as it causes the most issues and debugging problems.

Why is the Tailwind prettier Auto sorting plugin important?

The Tailwind prettier Auto sorting plugin is crucial because it ensures that the order of Tailwind classes matches the order in which they are applied in the CSS. This prevents issues related to conflicting styles and makes it easier to identify and debug problems.

What is the speaker's advice regarding copy-pasting code when working with Tailwind CSS?

The speaker encourages copy-pasting code when working with Tailwind CSS. Since Tailwind classes are consistent across projects, it's easy to copy and paste markup from one project to another without issues. This can be particularly useful when working on multiple codebases or within a company with different teams.

What is the final tip the speaker provides regarding the Tailwind config file?

The final tip is to avoid making extensive changes to the Tailwind config file. The speaker recommends using the config file to add new styles but not to change the existing behavior or functionality of Tailwind CSS.

What does the speaker say about using editor features like multi-cursor editing when working with Tailwind CSS?

The speaker recommends using editor features like multi-cursor editing to quickly change duplicated class lists simultaneously. The Tailwind team also endorses this approach, stating that it's often the best solution when you can edit all duplicated class lists at once, without introducing additional abstractions.

How does the speaker suggest handling styles for repeated elements like navigation links?

The speaker suggests that, for repeated elements like navigation links, you can either create a component with the desired styles and mount it multiple times or simply copy and paste the class names for each instance. The latter approach is often simpler and more maintainable, according to the speaker.

What is the potential benefit of using loops with Tailwind CSS, as mentioned by the speaker?

The speaker mentions that another option for reusing styles is to use loops. You can wrap your components in a loop, allowing you to apply the same set of classes to each instance without creating a separate component.

What is the speaker's overall message regarding the use of Tailwind CSS?

The speaker's overall message is to encourage embracing the simplicity and consistency of Tailwind CSS. Rather than trying to force it into more complex patterns or systems, the speaker advises following Tailwind's design principles of simplicity, copy-pasting when needed, and avoiding unnecessary abstractions.

Outlines

00:00

🔑 Key Tailwind Tips: Cheat Sheets, Simplicity, and Class Order

This paragraph provides tips for effectively using Tailwind CSS. It recommends using cheat sheets to quickly find the right classes for CSS properties, keeping things simple by copy-pasting styles instead of over-abstracting, and using the Tailwind Prettier Auto Sorting plugin to maintain consistent class order. The plugin helps identify conflicting classes, improves code review, and ensures CSS order matches the HTML order, preventing debugging nightmares caused by order mismatches.

05:01

⚡ Embrace Simplicity and Code Reuse with Tailwind

This paragraph continues the theme of keeping things simple with Tailwind. It advises against overusing the @apply feature, which can lead to technical issues. Instead, it suggests reusing styles through copy-pasting or using loops, as recommended by the Tailwind team. The paragraph also encourages code reuse by copying and pasting markup between projects, as Tailwind provides a consistent syntax. It cautions against over-customizing the Tailwind config and encourages using it for additive changes rather than modifying core functionality.

Keywords

💡Cheat sheets

Cheat sheets refer to quick reference guides that summarize the most important syntax or properties of a programming language or framework. In the context of the video, cheat sheets are recommended as a helpful tool for learning and quickly referencing the various utility classes in Tailwind CSS, which can be challenging for those transitioning from traditional CSS. The video suggests using cheat sheets to easily look up the corresponding Tailwind classes for specific CSS properties like padding or flex-grow.

💡Copy-paste

The video encourages not being afraid of copying and pasting code snippets or class names when working with Tailwind CSS. Unlike more complex styling solutions that promote creating reusable components or abstractions, Tailwind CSS is designed to be simple and straightforward. Copying and pasting Tailwind classes directly is often the easiest and most maintainable solution, especially for repetitive styles. The consistent and modular nature of Tailwind classes makes it easy to reuse code across projects or teams without issues.

💡Simplicity

Simplicity is a core principle advocated in the video when it comes to using Tailwind CSS. The approach discourages over-engineering or introducing complex abstractions unnecessarily. Instead, it promotes keeping things simple by directly applying Tailwind classes to elements or components. The video suggests that copying and pasting styles or making minor adjustments through editor features is often the best solution, rather than creating reusable components or abstractions prematurely.

💡Class sorting

Class sorting, specifically the Tailwind prettier Auto sorting plugin, is highlighted as one of the most important features for an optimal Tailwind experience. This plugin automatically sorts the Tailwind classes in a consistent order, making it easier to identify and debug conflicting styles, facilitate code reviews, and ensure that the order of class application matches the order in the generated CSS. The video emphasizes the significance of this feature in preventing nightmarish debugging scenarios caused by order-related issues.

💡apply directive

The apply directive is a feature in Tailwind CSS that allows developers to apply Tailwind classes within traditional CSS files. However, the video strongly advises against using this feature, as it negates one of the primary benefits of Tailwind CSS, which is its utility-first approach. Using apply effectively replaces Tailwind's modular classes with a traditional CSS abstraction, increasing the chances of technical issues and maintenance challenges in the future.

💡Component abstraction

Component abstraction refers to the practice of creating reusable components or abstractions to encapsulate styles and functionality. While this approach is common in many styling solutions, the video suggests that with Tailwind CSS, it is often unnecessary to abstract styles into separate components prematurely. Instead, directly applying Tailwind classes to elements or copying and pasting styles between components is encouraged, as it aligns with Tailwind's simple and modular design.

💡Tailwind config

The Tailwind config refers to the configuration file in a Tailwind CSS project, which allows developers to customize various aspects of the framework, such as adding new utility classes or modifying existing ones. The video advises against making extensive changes to the Tailwind config, as it can lead to deviating from the intended simplicity and modularity of Tailwind CSS. Instead, it recommends using the config sparingly, primarily for adding new utilities rather than modifying existing ones.

💡Utility classes

Utility classes are the building blocks of Tailwind CSS, representing low-level styles like padding, margins, colors, and typography. These classes are highly modular and composable, allowing developers to build complex user interfaces by combining multiple utility classes together. The video emphasizes the importance of understanding and utilizing utility classes effectively, as they are the core of the Tailwind CSS approach.

💡Code reuse

Code reuse is a significant advantage of using Tailwind CSS, as highlighted in the video. Because Tailwind utilizes a consistent and modular set of utility classes across projects, it becomes easy to copy and paste markup or styles from one codebase to another without issues. This promotes code reuse and sharing, particularly in larger organizations with multiple codebases or teams working on different projects.

💡CSS order

The order in which CSS rules are applied is a crucial concept discussed in the video. Unlike traditional CSS, where the order of styles in the HTML markup determines their precedence, in Tailwind CSS, the order of styles in the generated CSS file is what matters. This can lead to challenging debugging scenarios if the order of classes differs between development and production environments. The video emphasizes the importance of the Tailwind prettier Auto sorting plugin in mitigating these order-related issues.

Highlights

Cheat sheets make it easier to learn the Tailwind syntax and find the right classes for CSS properties quickly.

Don't be scared of copy-pasting and keeping your elements simple. Tailwind encourages a straightforward approach without enforcing complex patterns.

The Tailwind team recommends using editor features like multi-cursor editing to change duplicated class lists simultaneously, rather than introducing additional abstractions.

Avoid using the @apply feature in Tailwind, as it can introduce technical issues and goes against Tailwind's principles.

Use the Tailwind prettier auto-sorting plugin, as it makes it easier to identify conflicting classes, improves code review, and prevents order-related bugs.

The order of CSS classes in the HTML does not dictate the order they are applied, which can lead to debugging nightmares if the order differs between HTML and CSS.

Don't be afraid to copy and paste Tailwind classes between projects, as the consistent syntax allows for easy reuse without issues.

Use the Tailwind config to add new things, but avoid changing existing behavior, as it can lead to issues and goes against Tailwind's principles.

Transcripts

if you've seen my thumbnails you might

think I hate Tailwind if you've seen my

videos you probably know I love it I

hope these tips help you as much as

they've helped me regardless of your

familiarity with Tailwind the first one

and this is one I really wish I knew

about earlier because it helped me learn

Taylor much faster is cheat sheets if

you already know CSS the Tailwind syntax

can be scary to learn and going from

something you already know from CSS to

the right Tailwind class isn't always

easy cheat sheets make it a lot easier

the docs are great but the docs are more

focused on the what swears and whys not

the witches and the witch is the class

for padding is something you can find

really quickly by looking here which is

the class for Flex grow something you

can find really quick here and having

this one page you can just scroll up and

down and find specific CSS properties on

if you just Google Tailwind cheat sheet

you should find some good options here

this is the one I personally choose to

use thing two it's keeping it simple

this isn't like a trick I can show so

much as encouraging you to not be scared

of copy paste and generally making your

elements simpler a lot of people come

into Tailwind expecting a more complex

system like styled components that

prescribes a specific way of

architecting your components or

something like CSS modules with a

specific abstraction pattern Tailwind

doesn't have a pattern around how you

should use it it is by Design very

simple and generally the pattern for

using Tailwind right is also keeping

your things simple if you have a nav bar

and that navbar has four links in it and

you want each of those to be styled the

same you can make a component that has

these Styles applied and mount that

component four times or you can copy

paste the class name four times it's not

that big a deal it really isn't and if

you change your mind and you want to

change that underline property to a

bigger underline or you want to change

the color from Blue 400 to Blue 500 yes

it's annoying to change it in more than

one place we can also select it once

press command d a few times in vs code

have all of them selected and change all

of them at once I'm not the only one who

recommends this the Tailwind team does

too if you go to their docs they have a

page called reusing Styles in this whole

page is for the most part showing you

tricks on how to not worry about reusing

stuff as much the first thing it says

here is use editor and language features

like multi-kirks or editing and it shows

you how to change things in multiple

places at once when the text is the same

so if you want to change this from font

bold to font medium it's very easy to do

you don't need to make a component and

as they say here you'd be surprised at

how often this ends up being the best

solution if you can quickly edit all of

the duplicated class lists

simultaneously there is no benefit to

introducing additional abstractions

totally agree and I think people stray

away from this a little too often

because they're scared of repeating

themselves it's not a big deal it's

often the easiest and most maintainable

solution don't reach away from this if

you don't need to

the next option they have here is

putting it in a loop you can have all of

your contributors and you can wrap them

with a loop so that each one gets listed

individually and then you have all the

classes in one place so you have to make

a component you just inline the for Loop

that has the stuff that you need here

you can also start abstracting

components almost all the stuff we're

talking about view react whatever you

can break something into a component and

then reuse it more trivially tip number

three is somewhat related to this but

it's very important and it's a feature

in Tailwind I'm going to tell you not to

use that feature is ADD apply add apply

lets you apply a Tailwind class in a

traditional CSS class so in a CSS file

you can have Tailwind properties applied

to a different class this is kind of

useful for applying a Tailwind color to

your body background on your application

but if you're using this to write

Tailwind inside of CSS and then use

those CSS classes inside of your app

you've now taken one of the biggest

benefits of Tailwind thrown it away and

replaced it with a bad abstraction that

has a high chance of causing technical

issues in the future Adam himself the

creator of Tailwind has said that he

lightly regrets adding apply and it's

the feature that causes them the most

issues and they spend the most time

debugging by far he's estimated the cost

of the out apply feature for the

Tailwind business in the hundreds of

thousands of dollars on the topic of

where you put your Tailwind classes the

order you put them in is important too

if you take anything from this video as

a Tailwind user

I really hope it's this if you're not

already using it

the Tailwind prettier Auto sorting is

one of the most important things to have

as part of your Tailwind experience I

would go as far as to say you're not

really using Tailwind if you're not

using this because of how big of an

impact this plugin has had on my

experience writing maintaining and

shipping Tailwind

this does three important things first

off it makes it much easier to see if

you have conflicting classes because

they'll always be nearby each other

which makes it much easier to identify

debug and fix things when they're going

wrong second it makes code review way

way easier I now know what classes will

be where so when I'm skimming through

code I can quickly see where the padding

properties are where the flex properties

are where the display properties are

just by being used to the order that

makes me so much faster in code review

the same way prettier itself does the

consistent formatting makes it easier

for my brain to process what changes are

happening when I'm looking at code that

has changed but the most important bit

is that the way CSS classes are applied

is not based on the order of their class

names it's based on the order of the

style sheet so here we have two

different elements in the Dom we have a

b and b a so this div has classes A and

B applied and this diff has classes b

and a applied now we're going to do

something fun

we're going to make

the CSS for a

in the CSS for a we'll set background

color

to Blue

and now with B

we're going to change it when I

uncomment this what do you think is

going to happen are both going to be

blue are both going to be pink or is top

going to be pink and bottom is going to

be blue

both are pink

the reason is in the CSS B comes after

it no longer matters what order it's in

in the HTML

your HTML order does not dictate the

order the CSS applies therefore very

importantly if it is possible for the

order here to be different than the

order here it will be very hard to debug

when something happens it is so

obnoxious to deal with problems that

result in this or if this CSS in a

different file than this one and there's

a load in the browser at different times

the amount of issues in the amount of

years of my life I have lost to

debugging issues related to the order of

class names differing in production or

Dev or any of the other things in the

CSS specifically is insane and the most

underrated benefit of the automatic

class sorting is the order that this

sorts your classes is the same as the

order that they'll appear in your CSS

I I cannot put into words how valuable

this is

if you haven't experienced these bugs

yourself but trust me you do not want to

debug something related to this just use

their sort order it will keep you from

having miserable nightmares in the

future

just do it it is better you will feel

faster using it you'll feel faster

reviewing it and you're getting yourself

out of potential hell when you do that

one last tip and this kind of touches on

all the others

don't be scared of copy paste a lot of

developers are used to npm installing or

abstracting their features making

everything a reusable component or a

piece or installing someone else's

pieces

the goal of Tailwind is to make writing

styles very fast simple and reliable

if you have a style that works because

you found it in Tailwind UI you found it

on someone else's site or you found it

in your own code base you don't feel

like you have to install or abstract it

feel free to copy paste because the

Tailwind classes are so consistent and

work in every Tailwind project it is

very easy to take markup from a

different project and drop it in the one

you're in right now and have no issues

this is obviously useful if you're a

developer that's touching multiple

things or even just a developer that has

access to other code bases that have

code you might want to use it is even

more valuable if you're at a company

that has multiple different code bases

and you want to be able to context shift

between different teams and reuse code

between them as well without even having

a mono repo much less a component

Library that's shared when you have

Tailwind as the the syntax that defines

how things look in your applications

that syntax is a contract that you can

copy paste between places and it's still

honored in the same ways unless you go

crazy with the tail and config which

final final tip don't go crazy in the

Tailwind config use it to add things

don't use it to change things I know I

went pretty ham with Helen when I

started trying to make it do all the

stuff it wasn't built to do trying to

make Tailwind work like styled

components or like other things

the goal of this video isn't to convince

you of tail end it's to show you what

helped me get good fast and what has

made me love Tailwind so much as a long

time user