[영문] Tailwind 101

date

Sep 3, 2023

slug

tailwind-101

author

status

Public

What is Tailwind?

Tailwind CSS is a utility-first CSS framework. It provides pre-designed classes that you can use to style your HTML elements, rather than individual components or functions.

Utility-First approach

Utility-first is a CSS methodology where you build up your styles using many small, purpose-specific classes

has no predefined components like buttons with btn class like Bootstrap.

can customize as much as you want

How does it work?

With classnames

With Tailwind CSS

no need to make separate css file

no need to think about the class naming

no need to worry that css conflicting with other styles

How does it differ from Bootstrap?

More utility classes

Bigger size
But Tailwind remove unused classes when build

No prebuild component

https://tailwindui.com/components

Tailwind nightmare

Steep learning curve

Hard to update and maintain

Bad readability

Still need to use Tailwind?

No more abandoned classnames or styles & make zero legacy code

You can anticipate the UI just by looking at the HTML = readability isn't as bad as you think (once you get used to it)

No naming, no stress

No pre-made ui

Debugging is easier

Small bundle size

Tailwind automatically removes all unused CSS when building for production

💡

Why not just use inline styles?

Designing with constraints

unlike inline styles, we can use pre-defined design system that we can custom

Responsive design

Tailwind provides responsive utilities

Hover, focus, and other states

Tailwind’s state variants make it easy to style

https://tailwindcss.com/docs/utility-first

Above all, it’s best option for NextJS 13

NextJS 13 and Tailwind

Why not keep using Styled-components?

💡

NextJS 13 - styling in CSS-in-JS

Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including concurrent rendering.
We're working with the React team on upstream APIs to handle CSS and JavaScript assets with support for React Server Components and streaming architecture.

The following libraries are supported in Client Components in the app directory (alphabetical):

kuma-ui

@mui/material

pandacss

styled-jsx

styled-components

style9

tamagui

tss-react

vanilla-extract

The following are currently working on support:

emotion

Good to know: We're testing out different CSS-in-JS libraries and we'll be adding more examples for libraries that support React 18 features and/or the app directory.

If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.

https://nextjs.org/docs/app/building-your-application/styling/css-in-js

How does Styled-components work?


const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;


function h1(styles) {
  return function NewComponent(props) {
    const uniqueName = generateUniqueName(styles);
    const createdStyles = createStylesThroughStylis(styles);

    createWithInjectCSSClass(uniqueName, createdStyles);

    return <h1 className={uniqueName} {...props} />;
  };
}


<style>
  .dKamQW {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }
</style>
<h1 class="dKamQW">Hello World</h1>

Things to consider

Precedence of classnames


// What color should the text below be?
<button class="rounded-lg p-4 text-yellow-500 text-blue-500 text-red-500">Red Text</button>

It's expected behavior. This is how html and css works, you can't change the precedence in html with the order of class-names.
What matters is the specificity of css selectors and the order of declarations in the source code if the specificity is the same. Because these declarations have the same specificity (single class-names) and the .p-4 declaration is defined later than .p-0 it will be the one applied to the element.
Read more about specificity: MDN Article | Specifics on CSS Specificity (CSS-Tricks)
If you are trying to dynamically toggle between p-0 and p-4 you should always swap them out, toggle both, you shouldn't rely on css source order.
https://github.com/tailwindlabs/tailwindcss/issues/1010#issuecomment-508988518


// Will the button change the text weight?

...
const [isBold, setBold] = useState(false);

return(
	<>
		<button className={`bg-blue-300 rounded-[8px] p-4 text-gray-50`} onClick={() => setBold(!isBold)}>
		  Will this button change the font weight?
		</button>
	
		<h2 className={`mb-3 text-2xl font-${isBold ? `black` : `semibold`}`}>
		  Text here...!!!
		</h2>
	</>
)
...

It could also be that you are trying to use dynamic class names, which won’t work because Tailwind doesn’t actually evaluate your source code and can only detect static unbroken class strings. Make sure you always use complete class names in your code.
https://tailwindcss.com/docs/content-configuration#classes-arent-generated