Tailwind CSS

lastmod 2026-03-03created 2021-04-1683 edits

Rapidly build modern websites without ever leaving your HTML.

Categories

• Default
  • Tailwind:Base
  • Tailwind:HandlingStates - Handling Hover, Focus, and Other States
  • Tailwind:Components
  • Tailwind:Utilities
  • Tailwind:Directives
  • Tailwind:Functions
• Customization
  • Tailwind:Colors
  • Tailwind:Spacing
• Tailwind:Preflight
• Tailwind:Container - mx-auto
• Tailwind:Typography
• Tailwind:AddingCustomStyles
• Tailwind:Plugins
• PostCSS

UI Frameworks

• Tailwind Elements - 500+ free Tailwind CSS components
• Konsta UI - Mobile UI components built with Tailwind CSS
• Flowbite - Build websites even faster with components on top of Tailwind CSS
• Material Tailwind - https://www.material-tailwind.com/ - Material Design (decent)
• Konsta UI - Pixel perfect mobile UI components
• Cruip Free Components
• Tailwind Design
• Ghost UI
• FloatUI
• Tailwind Awesome
• HyperUI
• a17t
• Kometa UI Kit
• Tailwind Toolbox
• Headless UI
• Tailwind UI Kit
• DaisyUI - https://daisyui.com/ - Seems good for customizing multiple themes
• FlyonUI - Open-source component library for Tailwind CSS
• Tailwind Components
• Treact
• Tail-Kit
• Lofi UI
• VechaiUI
• Flowbite
• Tailwind Starter Kit - https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation - Good example pages (Login, Profile, Landing)
• Kutty
• PostSrc
• Components Collection
• Xtend UI - https://xtendui.com/ - Animation seems good
• https://konstaui.com/
• https://preline.co/
• https://flowbite.com/
• https://tailblocks.cc/
• https://tailwind-elements.com/
• https://tailgrids.com/
• https://tailwinduikit.com/components/E-commerce/Components/CTAs
• https://merakiui.com/components/alerts
• https://www.tailwindawesome.com/
• https://mambaui.com/?ref=xranks
• lukacho/ui - UI component library with clean animation support

Plugins

• tailwindcss-animate

UI Frameworks (Copy & Paste)

• HyperUI - https://www.hyperui.dev/
• Mamba UI - https://mambaui.com/
• Meraki UI - https://merakiui.com/
• Tailblocks - https://tailblocks.cc/
• Kimia-UI - https://kimia-ui.vercel.app/
• Tail-kit - https://www.tailwind-kit.com/
• Tailwind Toolbox - https://www.tailwindtoolbox.com/
• Kometa UI Kit - https://kitwind.io/products/kometa/components/
• Lofi UI - http://ww1.lofiui.co/
• Treact - https://treact.owaiskhan.me/
• Kutty - https://kutty.netlify.app/
• Componentity - https://componentity.com/category/tailwindcss/
• Wickedblocks - https://wickedblocks.dev/

Not tailwind

• Headless UI

Dependencies

• Emotion - CSS-in-JS library designed for high performance style composition
• PostCSS
  • postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS
• modern-normalize - Normalize browsers' default style

How to install

• Installation - Tailwind CSS

create-react-app + PostCSS

• Install Tailwind CSS with Create React App - Tailwind CSS
• Install Tailwind CSS using PostCSS - Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin

Install the required packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure the postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Configure the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add to the top of the index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Getting set up

• Documentation - Tailwind UI

Libraries needed for the basic setup:

• Font: Inter
• UI components: Headless UI
• Icons: Heroicons

How to apply CSS (using @apply)

• tailwind css @apply :: Cog Factory

Just use @apply.

Below is a newly created .nav__link in assets/scss/styles.scss. With @apply, you can apply existing utility classes to your own custom class.

@tailwind base;
@tailwind components;

.nav_link {
  @apply font-semibold text-gray-700 hover:border-gray-600 border-b-2 border-transparent;
  a {
    @apply block py-7 px-4;
  }
}

@tailwind utilities;

If you spread it over multiple lines, media queries may not be applied.

.today-text {
  @apply 2xl:tw-pl-2.5;
  @apply xl:tw-pl-2;
  @apply lg:tw-pl-1.5;
  @apply tw-pl-1;
}

does not work. Change it as below.

.today-text {
  @apply tw-pl-1 lg:tw-pl-1.5 xl:tw-pl-2 2xl:tw-pl-2.5;
}

Adding a Breakpoint

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',   // 새로운 브레이크포인트 추가
        '3xl': '1800px', // 초대형 화면 추가
      }
    }
  }
}

When classes with a child Selector containing > * + *, such as Divide, are not applied

When using Divide Width with a custom component as below:

<div className="divide-x-2">
  <Scrollbars>  <!-- 이게 커스텀 컴포넌트 -->
    <div>Item 1<div>
    <div>Item 2<div>
    <div>Item 3<div>
    <div>Item 4<div>
  </Scrollbars>
</div>

it may not work. A custom component such as <Scrollbars> swallows everything matched by the > * + * query, so it does not work.

If you use scss, define it as follows.

$--divide-y-reverse: 0;
$--divide-opacity: 1.0;

.dailyWorkItem {
  @apply tw-p-2;
  @apply tw-cursor-pointer;
  @apply tw-space-y-2;

  &:not([hidden]) + &:not([hidden]) {
    border-style: solid;
    border-top-width: calc(1px * calc(1 - $--divide-y-reverse));
    border-bottom-width: calc(1px * $--divide-y-reverse);
    border-color: rgb(221 221 221 / $--divide-opacity);
  }

  &[data-selected=true] {
    @apply tw-bg-[#{$selected-color}];
  }

  &:hover {
    @apply tw-bg-[#{$hover-color}];
  }
}

Important modifier

• https://tailwindcss.com/docs/configuration#important-modifier

Applying !important in SCSS

@apply text-4xl #{!important};

Alternatively, you can make a utility important by adding the ! character at the beginning.

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

The ! always goes at the beginning of the utility name, after any variants, but before any prefix.

<div class="sm:hover:!tw-font-bold">

Applying negative values

If you have a prefix, the dash modifier for negative values must be added before the prefix, so -mt-8 becomes -tw-mt-8 if you configured tw- as your prefix.

<div class="-tw-mt-8">
  <!-- -->
</div>

Arbitrary values but for variants

• html - How to access all the direct children of a div in tailwindcss? - Stack Overflow
• Tailwind CSS v3.1: You wanna get nuts? Come on, let's get nuts! - Tailwind CSS
• Adding Custom Styles - Tailwind CSS

Example 1:

<div class="[&:nth-child(3)]:py-0">
  <!-- ... -->
</div>

Example 2:

<div class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/50 [@supports(backdrop-filter:blur(0))]:backdrop-blur">
  <!-- ... -->
</div>

Example 3:

<ul role="list" class="[&>*]:p-4 [&>*]:bg-white [&>*]:rounded-lg [&>*]:shadow space-y-4">
  <li class="flex">
    <img class="h-10 w-10 rounded-full" src="..." alt="" />
    <div class="ml-3 overflow-hidden">
      <p class="text-sm font-medium text-slate-900">Kristen Ramos</p>
      <p class="text-sm text-slate-500 truncate">[email protected]</p>
    </div>
  </li>
  <!-- ... -->
</ul>

Example 4:

<ul role="list" class="hover:[&>li:nth-child(2)>div>p:first-child]:text-indigo-500 [&>*]:p-4 [&>*]:bg-white [&>*]:rounded-lg [&>*]:shadow space-y-4">
  <!-- ... -->
  <li class="flex">
    <img class="h-10 w-10 rounded-full" src="..." alt="" />
    <div class="ml-3 overflow-hidden">
      <p class="text-sm font-medium text-slate-900">Floyd Miles</p>
      <p class="text-sm text-slate-500 truncate">[email protected]</p>
    </div>
  </li>
  <!-- ... -->
</ul>

Applying responsive styles in SCSS

.root {
  @apply container mx-auto;

  ...

  @screen lg {
    @apply flex items-center h-yourMain;
  }
}

Getting style settings in JS

• Configuration - Tailwind CSS

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

If TypeScript restricts you to the src/ directory

• reactjs - Import styles directly from tailwindCSS config file - Stack Overflow
• reactjs - How to use TailwindCSS's resolve config with Typescript - Stack Overflow

Use the tailwind.config.js file as follows:

const tailwindConfig = require("./src/tailwind.config");

module.exports = tailwindConfig;

Switching DarkMode to class injection (old-style)

Change darkMode to the 'class' value in the tailwind.config.js file.

module.exports = {
  darkMode: 'class',
};

Where the button event or state change happens:

  const [darkMode, setDarkMode] = useRecoilState(darkModeState);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

Finding the class name of a custom-implemented parent elem when you have no other choice

When, due to the already implemented Elem structure, the wrap--darkMode class sits at "html ~ [somewhere here] ~ info-card", apply it like this:

@mixin info-card {
  @apply tw-bg-white;
  @apply tw-border;
  @apply tw-border-solid tw-border-[#ddd];
  @apply tw-rounded-md;
  @apply tw-shadow-md;
  @apply tw-p-2.5;

  :global(html .wrap--darkMode) & {
    @apply tw-bg-[#222538];
    @apply tw-border-0;
  }
}

If you use CSS Module, you must apply :global.

Troubleshooting

Tailwind + SCSS: resolve-url-loader: error processing CSS, invalid mapping

• Tailwind + SCSS: resolve-url-loader: error processing CSS, invalid mapping - Lakur
• resolve-url-loader cannot operate: CSS error when using @apply · Issue #48 · tailwindlabs/tailwindcss
• (react-scripts 3.4.0) SCSS file with import statement cause resolve-url-loader: CSS error · Issue #8596 · facebook/create-react-app

When building, the following error may be printed.

Creating an optimized production build...
Failed to compile.

Error: resolve-url-loader: error processing CSS
  Invalid mapping: {"generated":{"line":1,"column":994},"source":"file:///home/your/Project/steelanalysissystem-inspection-webui/src/components/InfoCard.module.scss","original":{"column":null},"name":null}

Move the one-off style at the end of the line (e.g. max-w-[500px]) toward the front. (It must not be at the very end)

Code like the following

@apply mt-5 max-w-[500px];

should be changed as follows.

@apply max-w-[500px] mt-5;

If there are several directives on one line, keep reordering them so that an item using square brackets does not come last, or rewrite it in plain css.

Object.hasOwn is not a function TypeError: Object.hasOwn is not a function

Tailwind CSS:
  Tailwind CSS: Object.hasOwn is not a function TypeError:
    Object.hasOwn is not a function at /home/your/Project/your-web/node_modules/daisyui/src/theming/functions.js:75:18
    at Array.forEach ( )
    at Object.convertColorFormat (/home/your/Project/your-web/node_modules/daisyui/src/theming/functions.js:74:27)
    at /home/your/Project/your-web/node_modules/daisyui/src/theming/functions.js:184:39
    at Array.forEach ( )
    at Object.injectThemes (/home/your/Project/your-web/node_modules/daisyui/src/theming/functions.js:183:28)
    at mainFunction (/home/your/Project/your-web/node_modules/daisyui/src/index.js:59:40)
    at registerPlugins (/home/your/Project/your-web/node_modules/tailwindcss/lib/lib/setupContextUtils.js:796:61)
    at createContext (/home/your/Project/your-web/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1198:5)
    at Object.module (/home/your/Applications/pycharm-professional-2022.1.3/plugins/tailwindcss/server/tailwindcss-language-server:2961:6934)

If this error occurred in an IntelliJ-family IDE, check the node Interpreter path setting:

cn function

The cn function is a utility that safely merges Tailwind CSS class names.

• clsx - Combines class names conditionally (falsy values are removed automatically)
• twMerge - Resolves conflicts between Tailwind classes (e.g., if p-2 and p-4 are both present, only the later p-4 applies)

For example, when calling cn('p-2 bg-red-500', isActive && 'p-4 bg-blue-500'), if isActive is true, it merges cleanly into p-4 bg-blue-500.

import {clsx, type ClassValue} from 'clsx';
import {twMerge} from 'tailwind-merge';

/** Merges class names with clsx and resolves Tailwind CSS conflicts via twMerge. */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

See also

• CSS
• webfont
• Emotion CSS
• PostCSS - PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.
• PurgeCSS - A tool that finds and removes unused CSS

Favorite site

• Tailwind CSS web site
• Introducing Tailwindcss.(with. twin.macro + emotion)
• Our experience with Tailwind CSS | Kakao Entertainment FE Tech Blog
• [Recommended] Hello Tailwind CSS! | Pros, cons, usage | Wonny Log
• Why did the FE development group adopt Tailwind CSS, and how did they use it? | Kakao Entertainment FE Tech Blog (Emotion CSS vs Tailwind CSS)
• (Translation) The evolution of scalable CSS | Ykss
• Applying tailwind css to a react project (without create-react-app)
• Setting up Tailwind + React.js
• [Recommended] THE STAR SHINING IN THE MIDDLE :: Posts in the 'CSS/Tailwind CSS' category
• tailwind CSS v4.0: A complete game changer for modern web development (translation) | GeekNews
  • [Translation] (Translation) tailwind CSS v4.0: A complete game changer for modern web development | by Jo Yeongje | Jun, 2025 | Medium
  • [Original] Tailwind CSS v4.0: A Complete Game Changer for Modern Web Development | by Nata Nael | Jun, 2025 | Stackademic