Tricks

Default styles are gone

After you installed tailwindcss, the default styles of some HTML elements are gone. For example, the <h1> element will not have any styles applied to it. You need to add styles manually. The reason is to forced you to styles these HTML elements instead of relying on browser defaults.

For more details, see the preflight.

Text wrap

You need to set the width of the element to make the text wrap. Otherwise, it will not wrap.

<p className="max-w-64 break-normal">very very long text. Can use break-all 1 word that is too long.</p>

List item

After adding css for tailwind, the black dot marker of list item is not displayed.

When you use Tailwind's @apply or global resets, it can override or remove default browser styles for elements like <ul> and <li>. Also, Tailwind's preflight (its CSS reset) removes default list-style-type from lists.

Solution: <ul className="list-disc pl-6">

ul, ol {
    list-style: disc outside;
    padding-left: 1.5rem;
}

Dynamic class names

Dynamically changing part of the class names using a variable will not work in Tailwind CSS because Tailwind's JIT compiler only includes classes it can see in your source at build time. For example, when you write

className={`bg-${color}-200 text-${color}-800`}

it will not work because color is a variable and Tailwind cannot see it at build time. To fix this, you need to make those class names static (or explicitly safelist them). For example, using a small lookup:

const COLOR_CLASSES = {
red: "bg-red-200 text-red-800",
green: "bg-green-200 text-green-800",
}
<span className={`${COLOR_CLASSES['green']}`}>Green Text</span>

Border color not showing

Live Demo

❌ No border color because there is no thickness, even though the doc says *border* is 1px.

❌ No border color because both *border* and *border-4* are defined. Pick 1.

✅ Border color is shown

✅ Border top/bottom thickness

❌ Border top/bottom thickness

✅ Border top/bottom thickness

Code: BorderColors.jsx

export default function BorderColors() {
    return (
        <>
            <div className="m-2 border border-red-600">
                ❌ No border color because there is no thickness, even though the doc
                says *border* is 1px.
            </div>
            <div className="m-2 border border-4 border-solid border-red-500">
                ❌ No border color because both *border* and *border-4* are defined. Pick 1.
            </div>

            <div className="m-2 border-1 border-red-600">✅ Border color is shown</div>

            <hr />

            <div className="m-2 border-t border-b">✅ Border top/bottom thickness</div>
            <div className="m-2 border-t-1 border-b-1">❌ Border top/bottom thickness</div>
            <div className="m-2 border-t-[1px] border-b-[1px]">✅ Border top/bottom thickness</div>
        </>
    )
}

Link image with round corner

When you put an image inside a link and you have to round the corner of the link, the corner of the image will not be rounded or it is not rounded nicely.

What I found to solve this is to add p-1 to the link element.

Live Demo

Code: LinkImageRoundCorner.jsx

// Bad demo: Not clearly showing rounded corners with p-1
export default function LinkImageRoundCorner() {
    return (
        <div className="mx-8">
            <a href="https://example.com" className="border-1 border-gray-500 rounded-lg">
                <img src="https://picsum.photos/id/20/100/100" className="" />
            </a>

            <a href="https://example.com" className="border-1 border-gray-500 rounded-lg p-1">
                <img src="https://picsum.photos/id/20/100/100" className="" />
            </a>

            <a href="https://example.com" className="block w-64 h-64 rounded-lg overflow-hidden shadow-lg">
                <img src="https://picsum.photos/id/20/100/100" className="w-full h-full object-cover" />
            </a>
        </div>
    )
}