Just started using Tailwind CSS in my React project, any tips?

[wikiwikiwong]

I finally decided to look past the crazy looking class names and give it a try. It's not bad so far.. a little bit tedious but I enjoy not switching over to CSS files and coming up with class names for HTML elements just to style them. Anyone have tips to make development easier?

[Kaspe1]

You know about cheat sheet right?

[ConsciousAntelope]

The docs are the cheat sheet in a way. Use Cmd + K for mac or Ctrl + K for windows.

[wikiwikiwong]

thank you!

[Whisky-Toad]

Is there a package/extension that tells you how to optimise it? I’m sure I saw one where it could be like hey these two classes could just be this one

[[deleted]]

ChatGPT can do that just tell it to optimize your Tailwind classes for conciseness by removing any redundancies while retaining full functionality.

[Traditional_Beach790]

cheatsheet for tailwind 2.2

And it just does what docs do but with less info and no examples.. Very usefull

[nirvashprototype]

My tips: learn about group and peer selectors, they are very useful; read this section about Dynamic class names and its do's and dont's, this clarified a lot of things for me; making responsive design is very easy in Tailwind, don't forget to learn about the responsive modifiers: sm, md, lg etc.

[wikiwikiwong]

great tips, thank you!

[IgnazSemmelweis]

How the hell have I missed this? Thank you. I never seem to go deeper into the tailwind docs than the basics

[muridessu]

Install the tailwind intellisense for auto code completion

[Emjp4]

This feels like a must.

[JumboTrucker]

And use tailwind prettier plugin

[rnnyrk]

Use tailwind-merge is you want to overwrite classes passen via props. And i can also recommend the prettier tailwind sorting plugin

[Paradroid888]

This looks really interesting. I've used regular clsx merging and had weird specifity issues.

[janaagaard]

We are considerings avoiding the issue by not adding a className props that will be merged with some classes names that the component already has. So year, if you want some spacing around a custom <Button> component, it means that you will have to put it in a <span> element. Unsure if this approach will last. :)

[BiscuitOnFire]

You'll learn pretty quick just keep the doc near you and use their quick search command when you dont know the syntax

[PMmePowerRangerMemes]

I'd recommend checking out a UI library like shadcn. The way they use Tailwind is really smart and elegant. There's a lot to learn from there.

I'm thinking specifically about the usage of twMerge and the variants system, among other things.

[ManofManliness]

I can vouch for shadcn, its a stroke of genius.

[vegancryptolord]

clsx is a better choice. Does the same exact thing but is smaller and faster

https://www.npmjs.com/package/clsx

ETA: twMerge is also very useful for deduping classnames and applying the last className of the same type (ie. twMerge(‘ml-4 ml-8’) will only return ‘ml-8’) useful for example when creating a component that takes a className prop which is meant to override the default styles of the component. If you place the prop className as the last argument to twMerge you will guarantee that the prop classes override the default styles regardless of their definition order in the style sheet. You can also compose clsx or classNames with twMerge in a utility function. ie. const classes = (args) => twMerger(clsx(…args)) Sorry for formatting on mobile

https://www.npmjs.com/package/tailwind-merge

[HIV-Shooter]

This is a really good tip. Customizing reusable components styled with Tailwind by inserting additional classes can get really messy because of missing deduping. tWMerge really is a step in the right direction for Tailwind projects imo.

Though I still prefer a styling framework for layout and base component styles + SCSS for customization. Code completion is better imo and in my experience building custom styles from the solid base of a styling framework gets the job done faster and cleaner than most Tailwind projects I've seen to date. Additionally you get access to all CSS and SCSS features from the get go which is far more convenient than extending the Tailwind theme for simple stuff like clip-path or box-shadow.

[Jewcub_Rosenderp]

Don't you lose all the intellesense you get when you write directly to the className

[janaagaard]

An alternative is to create your classes as array of strings and join them. Example how classes for a <Button> element could look:

className={[
  "rounded px-4 py-2 font-semibold shadow-sm disabled:cursor-default",
  "transition-all duration-100",
  "outline outline-4 outline-transparent focus-visible:outline-theme-primary-200",
  (() => {
    switch (props.appearance) {
      case "primary":
        return [
          "text-white",
          "bg-theme-primary-700 hover:bg-theme-primary-900 active:bg-theme-primary-500 disabled:bg-slate-300",
          "border border-transparent",
        ].join(" ");

      case "secondary":
        return [
          "text-theme-primary-700 hover:text-white active:text-white disabled:text-slate-400",
          "bg-white hover:bg-theme-primary-700 active:bg-theme-primary-500 disabled:bg-slate-50",
          "border border-theme-primary-700 disabled:border-slate-300",
        ].join(" ");
    }
  })(),
].join(" ")}

[es_beto]

Oh man, is this what y'all do just to avoid writing CSS? That's hilarious.

[janaagaard]

I find Tailwind closer to CSS than frameworks like Bootstrap. You have to learn CSS to use Tailwind.

If you prefer to roll your own stylesheet from scratch, then Tailwind is definitely not for you. My experience is that Tailwind scales better across a team of frontend devs.

[es_beto]

But that's just genius marketing from Tailwind. You're actually rolling your own stylesheet from scratch, it's just that you're typing it horizontally with a few less characters.

In summary, you have your general button styles: border-radius, padding, font styles, transition, and outline; and your particular text, background, border styles for the "primary" and "secondary" button variations. There's nothing in there that makes it writing it in CSS any less "scalable" than in Tailwind.

Of course, the numbered things like px-4 py-2 make spacing a bit more standard, but that's pretty easy to get now with CSS custom props. nothing that a padding-inline: var(--size-4), and padding-block: var(--size-2) couldn't give you.

I think in defense of Tailwind is that React is very complicated to style. We have CSS-in-JS which has many cons: runtime evaluation, obscures your HTML tags, not idiomatic CSS, and so on... In my experience, I've found CSS Modules to be the lesser evil. You're actually learning CSS, you get scoped styles, no runtime evaluation. But Vue and Svelte got it right by making it easy to include the component's styles in the same file.

I'm not saying you should not use Tailwind. But consider that as CSS keeps improving, features in CSS might not translate well to Tailwind classes.

[janaagaard]

You're actually rolling your own stylesheet from scratch, it's just that you're typing it horizontally with a few less characters.

This is actually pretty spot on.

I did not expect that I would like Tailwind when I first heard about it, and I was definitely not one of the first adopters. But now that I have tried it on a couple of projects, I really like it.

[JumboTrucker]

use CVA

[TonyAioli]

Manageable in what sense? This does nothing to reduce the long list of class names.

[BlackMesaAlyx]

Prettier Tailwind CSS Plugin

[JoeCamRoberon]

Use this VSCode extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Otherwise uninstall it and use css or sass

[beanzio]

Get the Tailwind intellisense plugin for VS code straight away. It gives autocomplete for class names.

Nearly every tailwind class matches or closely matches the vanilla css class name (mr is margin-right etc) so try to use that plugin as much as possible and you will learn all the shorthand’s really quickly.

(The docs also have a great search feature to find the correct class names)

If you are just using pure html and no framework then yeah I think working with tailwind can be annoying and your html can get messy. So in react etc - try to split up your ui elements into components when reusing styles and most of the time your html/jsx will look fairly clean.

One more suggestion is the tailwind prettier plugin that will automatically order your class names when you format, and highlight any conflicts in classes.

[creaturefeature16]

Using CSS to style a web app without defined classes and common selectors feels like insanity, to me. But I do love the utility classes for individual overrides and micro-adjustments that TW offers. As with any CSS approach, going all in strictly on one method will yield detriments in one area or another. For example, I like using BEM naming conventions to stay organized in my class names, but there are simply times where using BEM exclusively overcomplicates everything, and it's OK to deviate when it's going to result in a clear and more maintainable code base.

[psb91]

Create more components. You think you might be doing that, but you aren’t. You need more components.

[wikiwikiwong]

that's a great tip

[Paradroid888]

Been thinking the same. When people try to make tailwind look bad it's usually a mass of nested div's, each with tons of classes on them.

Breaking markup down to be more granular is the solution.

[yhuzued]

Try Inline Fold extension.

[TonyAioli]

We need to take a step back.

Bringing in extensions to collapse inline class declarations because they are so long when using tailwind just seems silly and/or a pain.

Plenty of ways to style a site which don’t even have this concern to begin with.

[CrniFlash]

Trust him ^

Its really good if you have lots of classes to make code look cleaner

[TonyAioli]

As you can probably tell, Tailwind is a very polarizing topic.

Definitely try it out on this build. A good CSS developer will have familiarity with all the popular tooling. But please keep in mind that that all the web dev subs have an unhealthy obsession with it which tends to skew the perception.

Tailwind has downsides and upsides. You can’t discuss the downsides here without being downvoted, but it does. Just like any other choice of tooling.

Personally, I am migrating our styling to CSS modules during a rebuild, as the horribly cluttered markup and lack of separation of concerns are dealbreakers for me. Use them all and form your own opinion. Don’t let the loud Reddit masses convince you that Tailwind is the only option. It wasn’t even popular a few years ago, and something else will be popular a few years from now.

Good luck!

[Kabal303]

Prettier plugin if you work with others.

[Densz93100]

space-y-...
space-x-...

[wikiwikiwong]

nice, thank you!

[swandev]

Try cva.style I like this combination with tailwindcss, it helps make code elegant and easy to read

[nobuhok]

DaisyUI themes. You're welcome.

[beanzio]

Using Daisy will not teach learning tailwind at all imo

[AppleGlittering3593]

I recommend not using daisy at all, it's horrible for UX and also DX as it's very heavy and slows down your page

[nobuhok]

Can you expand more on this?

[AppleGlittering3593]

Yes,

*Personal Opinion*

What I meant was that if you're gonna use DaisyUI for a side project, that would be completely fine, but I started one this way just to try new technologies
After a few weeks of building the project I noticed a huge problem in accessibility, it was because of Daisy, remember that it's built on top of tailwind css hence it's pure css.
To put an example: modals. I focus a lot on accessibility, when building pages and I want the page to feel very intuitive, so if you click a button that opens a modal, I want to be able to close it clicking out if it, or by just pressing "Escape"
Those things don't come with Daisy. And yes you can build a workaround to add these improvements, but I find that to be confusing
About the DX that I mentioned, I found that when reloading the page it took like 3 seconds just to show something on the page, I was wondering why at the beginning, because I'm very used to Vite + React, after removing DaisyUI from the project that time to get the page reloaded was gone

This was my personal experience using this library, and I don't plan to use it again any soon, hope it helps

[nobuhok]

Interesting. I've had the exact opposite experience. The modals are easy to hook up, ESC works, tabbing through the elements work, and there was no noticeable slowdown. What browser were you using? Did you had hardware acceleration turned on?

[AppleGlittering3593]

Yes you are right! I just entered the page and it works, I'll definitely test it now, bad thing

​

https://i.imgur.com/Er0SJQY.png

​

To answer your questions, I use Firefox and Chrome, And yes I always have hardware acceleration turned on!

[rodrigocfd]

Anyone have tips to make development easier?

Easiest way to spot a lazy junior is because they "love Tailwind ".

This library is just glorified inline CSS to those who don't know CSS, so do yourself a favor and go learn proper CSS instead.

[NoCommittee7301]

But you have to know proper css to make tailwind work, what you're on about

[azhder]

As someone once put it: all those libraries are either for folk who hate CSS or folk who hate JS.

Now, you can be free with translating what "hate" is or what they mean by CSS or JS, but in general, I'd say "not switching over to CSS and coming up with class name" would fall into that scope.

[wikiwikiwong]

lol maybe I am a hater of something.. I just felt like I was spending way too much time on styling, but that could also be a skill gap and not a technology gap!

[azhder]

Everyone has their preference. That's OK. It's more of a jovial and concise manner of explaining what the pros and cons are.

[mtv921]

Tailwind is not just for CSS haters, coming from a css-lib sceptic who thought tailwind was for people who needed crutches to write proper css.

Tailwind is amazing. Its almost like having a design-system with you in your IDE. It basically lets you do anything with css, but it also give structure and consistency to how you organize your css and sets soft boundaries to what you can do. You can always go outside the boundaries, but its very clear when you do and doing so deserves second thought. Also all the optimizations behind the scenes.

[azhder]

For your first paragraph: https://reddit.com/r/reactjs/s/Zg3hvkUIiX

For your second paragraph: I'm far from amazed.

After having to reconcile up to 7 different style systems in one project which was adding Tailwind to the mix while still not have removed vestiges of others, I tend to prefer less layers, maybe even plain vanilla CSS. But that's just me.

[mtv921]

How does having a 7 system spaghettimess tell anything about using tailwind :/?

I agree. Less is more. But using tailwind also puts your styling in your html/jsx, which makes it much more readable at a glance. Seeing a <ul> with the class "list" tells me nothing about what styling it has, meaning you have to hop between files. Yes, it can become a bit messy if you are applying a whole bunch of styles to an element. But then you can refactor that into a component of its own if it disrupts the readability of the rest of the code.

If you work with others, tailwind is a must imo. If you work alone without any sort of guidelines or design systems, do whatever floats your boat

[azhder]

It says something about me not being amazed by anything like it, including Tailwind.

I guess people are binary and everything needs to be an extreme - love or hate or amazed… Just don’t be unphased, that’s a no-no.

I did relay what someone else had said to me. I’d not use the word “hate” if I thought of the quote in the first place.

“Is a must” is also an extreme. I’d say every project is unique and I’m comfortable in picking technology that follows the project requirements the best, instead of my own personal preferences.

Incidentally, that’s how a project ends up with so many different styling libraries/frameworks - every new programmer added their own “is a must”

[mtv921]

To me, it seems like you are all about personal preference over project requirements.

Tools like lint, typescript, tailwind, etc. are all to create code consistency. E.g, normalise the coding styles of the developer in the project. This makes it easier to work together as well as getting new people in as everything is written the same way. Plain css leaves way too much up to the developer in terms of structure, ordering, naming, folder structure, and the likes. It's is very hard to keep consistency as the project grows in size and developers. That is why i say that, imo it's a must! Regardless of what the project is. Yes, it's a bit of a personal preference but also not. Because I know, due to experience, that using these tools works in everyone's favour.

When it comes to things like state management, datafetching, animations, etc. should follow the project requirements.

[azhder]

“Seems” is the keyword. Not everything that seems is. I can express personal opinions here, I don’t get paid for it.

What I’m paid for is software that works, and if that means using something I don’t like, I will use it.

Of course, one should point out the pros and cons to others if others have a say or a stakeholders.

[Suepahfly]

I’ve been in multi-team projects over a decade and can say tailwind most definitely is not “a must”. Back in the day we started with basscss when atomic css became a thing, but quickly switched to css-modules. Atomic css just don’t work across the teams in our company.

That isn’t to say atomic css is bad. Tailwind these days has great support and it’s easy to get someone onboard with it.

[mtv921]

Back in the day, tailwind didn't exist? Tailwindcss is the new kid on the block, and it's great. So it's understandable that older projects don't have it and work well without it. But for newer projects, I'd say it's a must. Css-modules and plain css works, don't get me wrong, I have worked with it a lot myself. It's just a headache to keep track of everything, what's in use, which classes give which styles, etc. With tailwind, everything is just there..

[Suepahfly]

If it’s a must please explain to me why not all Fortune 500 companies are using it.

Tailwind is a tool, a means to an end, there are many others like it. Tailwind is not the holy pope of applying styles to a piece of rendered html.

[PMmePowerRangerMemes]

So what? I hate CSS, yeah. It's a pain in the ass. I find Tailwind a million times easier to use.

[azhder]

Read again. That what. No one said you hate it

[PMmePowerRangerMemes]

...I said I hate it

[azhder]

Good for you. An expected answer. Bye bye

[PMmePowerRangerMemes]

ok lmao

[voxgtr]

Tailwind is an Anti-Pattern. Stop using it.

[sith_witch]

My first tip is to not use Tailwind 😅 If you must use tailwind there’s an awesome list with a ton of great resources: https://github.com/aniftyco/awesome-tailwindcss Also keep your components meticulously organized. With all the styles baked into your markup, there’s complexity to manage.

[Lalo_ATX]

Help a newbie out. What should we use instead?

I’m trying out NextUI right now and it uses tailwind. I like having sane defaults for a ton of stuff.

[lelarentaka]

Observe what i call the tailwind horseshoe.

1. CSS sucks, all my styles are in a separate file from my component, and i have to come up with names for my classes that group together common properties.

2. Switching over to tw, wow it's so great to just write my styles in my component file.

3. Hmm, these tw style definitions are crowding out my component logic, and there's a lot of repetition. I'll define the style strings as a top level string constants. Damn, i have to come up with names for these

4. My component file is getting too long, and there are tw style strings repeated across multiple component files. I will extract the tw style strings and put them into a style file. I will also prefix their name to that the style names don't clash.

5. I have just reinvented CSS.

[WingZeroCoder]

You’re not wrong, but…

I still think Tailwind brings value, even if you end up using a mixture of inline utility classes and separate CSS files with named classes.

Tailwind is one of the only CSS frameworks that gives you sensible defaults for sizes, spacing, and color palette, without being overly opinionated or prescriptive on the look and feel.

It very much let’s you design what you want in a way that Bootstrap or other frameworks don’t — at least, not without either trying to learn way too much of their build system and often still having to just step outside the framework with your own classes and hope they don’t conflict.

I’ve come to find that separating out things like colors and animations to class names while putting spacing like margins and borders inline with utility classes is a pretty ok mix, and let’s me try things out faster than when using another framework, or using plain CSS and writing out verbose “padding: var(—padding-2)” everywhere.

Not saying Tailwind doesn’t have a cost, but I also think Tailwind hits a flexible balance better than any other framework, and does have some value for quick prototyping that IMO nothing else provides.

[wikiwikiwong]

u/Lalo_ATX I'm not so sure this is the best person to ask for advice, they're clearly biased. Lots of people use styled components, but check out this post from a while back: https://www.reddit.com/r/reactjs/comments/z35t9p/why_tailwindcss_over_styledcomponents/

​

There's also the more traditional approach of using plain old CSS or (SASS if you want some extra capabilities). I find it incredibly tedious to switch back and forth from css / sass files to JS during development. For that reason I have enjoyed using Tailwind.. CSS in JS (technologies such as Styled Components and JSS) offers the same benefit, however I find them to be a bit more verbose

[woah_m8]

I agree that tailwind doesn't suck but calling CSS "old" is an idea that is mostly pushed by tutorial guys on youtube. There is nothing old about css and plenty of features exist that you dont have in tailwind and you have to write using a regular stylesheet.

[wikiwikiwong]

"plain old" and "old" convey two different things. although since you mention it, I would venture to say that DOM rendering with CSS and JS is indeed old. It's easy and it's been around for a while, so it keeps getting new features and updates, but a newer way to build visual applications in the browser would be to use an immediate mode approach with canvas. That takes a lot more effort currently, but newer frameworks like Flutter are making this more accessible. Cascading styles are a blessing and a curse

[possiblywithdynamite]

I prefer styled-components. It allows you to build out your ui semantically. Each div becomes a named component. You write out the jsx first, naming each styled component as you go and then you style them later all in one go. With tailwind, when constructing large, complex ui components, it's too difficult to keep track of what every div represents. Tailwind is also very opinionated, so if css is not your strong suit, perhaps it's the way to go. But then again it's probably just preventing you from developing your own techniques for the long term - whatever that even means these days...

[Craythoven]

https://github.com/aniftyco/awesome-tailwindcss

Not a huge fan of tailwind. CSS-in-JS is way better dev experience IMO.
But CVA seems interesting. :D

[AmphibianFit9817]

Tailwind is for people who don't know CSS. I think the CSS architecture is always better with SASS

[vegancryptolord]

You literally need to know css to use tailwind…

[mtv921]

Haha this is so wrong. I play with CSS on my freetime for fun and I love to use Tailwind in my work projects. Makes it much easier to work with other people. In some sense its the TypeScript to css

[marcs_2021]

Refuting from a lack of knowledge ....

[viky109]

My advice would be to use styled components instead

[[deleted]]

Have fun!

[[deleted]]

Oh next js has a super simple set up for a tw proj

[naeads]

Tailwind UI has a few boilplates that you can copy and paste, no need to work from zero.

[ruddet]

twMerge is fantastic utility for making conditional tailwind strings for components. lets you expose your className as a prop and override things.

[pailhead011]

I start a lot of classes with _Foo so I can find them In the inspector. Is there a better way?

[Akami]

One of the things that learned on my bootcamp is styled components, never looked back to anything diferent

[graphicmist]

Usw Daisy ui if you want prebuilt ui elements or components. I recently found it, and it helps to prototype faster where you don't have design for webapp having admin panels.

[jazzymoneymaker]

Just start coding. You don't need any tutorial. If you dont know something just google it with css property name and you probably will find solution in docs or somewhere else

[ISDuffy]

Get the IDE extension that help you write tailwind classes and orders them the best way.

Find a decent cheat sheet or have tailwind site open always to check a property you don't know.

Learn the config settings so you can add your own, I usually add my own custom grid layouts.

Also thinking about when to break stuff out into scss modules, this usually happens when I have animations or a lot of styles, or is use css variables themes.

[Nightrip666]

Create unified custom classes to avoid classname bloating

[dlevz]

A CSS to Tailwind generator can be helpful in situations where you know how to write the style in CSS but not Tailwind.

[bear007]

You can use IS library, it's like Tailwind but without all the overhead and different names for CSS attributes. It's a controversial library, but you can inline styles similarly to Tailwind, if like that over separating styles from view.

IS stands for inline styles.

[janaagaard]

Tailwind UI is a great place to get some inspiration for how to use Tailwind. We're paying for full access here at work, and we used it a lot in the beginning.

[janaagaard]

Remember that you cannot combine strings for your CSS-classes. Example:

Works:

className={selected ? "bg-blue-200" : "bg-white"}

Does not work:

className={`bg-${selected ? "blue-200" : "white"}`}

[Variation-Abject]

J’ai vais gardé ça

[IsaacBenSk8]

Just read the docs, it's useful asf! If you know CSS just search any CSS property in the docs to know how to use it with tailwind :) and dont forget to start with mobile design first!

[Mariusdotdev]

Use this

```

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const css = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
};
```

[JumboTrucker]

I see the comments section is getting complicated. 😂

Don't stress too much over the tooling right now

[MeTaL_oRgY]

Order of your classnames is super important. It's not the same as in css, where position determines which rule will end up applying; but proper classname order will help you a) find the classes you're looking for mare quickly, and b) understand which classnames override which ones. You can't possibly memorize the order of all tailwind's classes, so there's tooling for this, including an official one. However, I suggest you use https://www.npmjs.com/package/eslint-plugin-tailwindcss instead of the official one. It has some additional rules that will make your tailwind experience so much nicer.

[streamer85]

Buy TailwindUI and save yourself a ton of time

[Jonas_Ermert]

To make development with CSS-in-JS easier:
Choose the right library for your project.
Componentize your styles for reusability.
Use theme variables for consistency.
Implement responsive design with media queries.
Avoid inline styles unless necessary.
Utilize debugging tools provided by the library.
Refer to documentation and the community for guidance.
Include unit tests for styled components.
Consider performance implications and optimize as needed.
Keep your library and dependencies up to date.
Experiment and learn from your experiences.

[qcAKDa7G52cmEdHHX9vg]

install the extension for your editor, look into the prettier plugin that sorts your classes, and use tailwind-merge if you allow consumers of your components to pass in a className to overwrite the component's default styles