React modal component styled with TailwindCSS in TypeScript

This React component provides a flexible and animated modal dialog, using Tailwind CSS for styling. It’s designed to be easily integrated into any React project that already includes Tailwind CSS for its styling needs. Features: Animations: Smooth transition for opening and closing the modal with fade and translation effects. Backdrop: Includes a clickable backdrop that closes the modal, enhancing the user experience and interaction. Accessibility: Implements focus management and can be closed with the Escape key, adhering to good accessibility practices.

Posts

Masonry using TailwindCSS

This code snippet demonstrates a simple yet effective way to create a masonry layout using TailwindCSS. Utilizing the columns-3 class, it organizes content into three neat columns, ideal for various types of content. The gap-3 class adds horizontal spacing between these columns, while mb-3 on each block ensures vertical spacing, maintaining a clean and organized look. <div class="h-screen w-full bg-slate-300 p-5"> <div class="p-5 columns-3 gap-3 bg-white rounded-lg drop-shadow-lg"> <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded"> Lorem ipsum </div> <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded"> Lorem ipsum, hello world!

Posts

Fade out text using a gradient and Tailwind CSS

In many cases, we have reasons not to display the whole text of an article or page and we just want to show an excerpt. Sometimes we break off the text using ellipsis. But sometimes we might want to fade out the text image/svg+xml . And sometimes we want to do that in Tailwind CSS. Is that possible? Yes it is. Tailwind CSS example <div class="mt-24 w-96 p-4 mx-auto rounded-lg shadow-lg overflow-hidden relative after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent after:to-white"> <h1 class="text-3xl mb-3 font-bold underline"> Hello world!

Posts

Use Wordpress’ paginate_link function with custom html and tailwindcss

Wordpress’ paginate_link function image/svg+xml is pretty neat for generating pagination links without any hassle. It does not, however, give you easy control over the exact html output. This makes it hard for styling the list, list items and links when using tailwindcss as we cannot add the utility classes to the elements. To make this easier, I wrote a little procedure that will do some string replacements that allows us to have more control over the classes that we want to use.

Posts

React & Tailwind CSS Tooltip Component

Tooltip component export function Tooltip({ content }) { return ( {/* Tailwind's group class will be used trigger the hover */} <span className="group"> {/* Font Awesome question mark icon */} <i className="fas fa-question-circle text-black group-hover:scale-120 ml-1 cursor-pointer ease-in-out duration-300 transition-transform"></i> <span className={` w-full absolute rounded shadow text-sm font-normal font-sans bg-black text-white p-2 pointer-events-none group-hover:pointer-events-auto opacity-0 group-hover:opacity-100 left-0 -top-3 -translate-y-3/4 group-hover:-translate-y-full ease-in-out duration-300 transition-[transform,opacity]`} > {/* Set inner HTML or just output content in an expression */} <span dangerouslySetInnerHTML={{ __html: content }}></span> {/* Optional speech balloon triangle pointing down */} <div className={` absolute w-0 h-0 border-l-4 border-t-4 border-r-4 border-b-4 border-black left-1/2 -translate-x-2 -bottom-1 transform rotate-45 shadow`} ></div> </span> </span> ); } How to use Tooltip import { Tooltip } from ".

Posts

Use a fallback for Safari’s problematic mix-blend-mode implementation, in TailwindCSS

Recently I had been working on a website that uses mix-blend-mode: color. I just found out it didn’t work on Safari. Apparently color is not supported image/svg+xml . I had to find a way to maintain this mix blend mode for non-Safari browsers, in which it worked fine, but override it in Safari. Then I found this overly verbose answer image/svg+xml on Stackoverflow.

Posts

Prevent a flex button to take up full width

Regular html & css <style> .container { display: flex; flex-direction: column; } .item { display: flex; flex-direction: row; align-items: center; align-self: center; } </style> <body> <div class="container"> <button class="item"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> Or with TailwindCSS <body> <div class="flex flex-col"> <button class="flex flex-row items-center self-center"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> See also https://stackoverflow.com/a/67819933/4496102 image/svg+xml

Posts

How to combine Webpack, Tailwindcss & Wordpress using webpack-watch-files-plugin

For my client I am currently building a website that makes use of tailwindcss image/svg+xml , a utility-first image/svg+xml CSS framework. With utility classes you can directly style elements using classes such as text-center (center the text) or bg-red-600 (red background, shade 600). Tailwindcss contains a lot of those classes and also allows combining breakpoints with these classes, such as md:font-bold (make font bold on medium sized devices or larger).