How to Create a Modal Dialog with Tailwind CSS
This succinct and straight-to-the-point article shows you how to create a modal dialog with Tailwind CSS and vanilla Javascript (just a few lines of JS code). Overview In general, when we show a dialog, we also…
Tailwind CSS: Custom Checkboxes and Radio Buttons
In Tailwind CSS, you can style custom checkboxes and radio buttons by using an official plugin named @tailwindcss/forms ((it is reliable and well maintained by the same team behind Tailwind CSS). Installing Install @tailwindcss/forms by executing…
Styling selected text with Tailwind CSS
In Tailwind CSS, you can control the background color and text color of selected text by using the selection modifier: Complete Example Preview: The full source code: That’s it. Further reading: Tailwind CSS: Light/Dark theme based…
Tailwind CSS: Light/Dark theme based on system settings
In Tailwind CSS, you can give an element both light and dark color schemes. Which scheme will be used depends on the settings of the user’s system or browser. To target light mode, just use standard…
Tailwind CSS: How to Detect Device Orientation
If a user is viewing your website on a mobile phone or an Android tablet or an iPad, you can determine whether the device’s orientation is portrait or landscape using Tailwind CSS’s landscape and portrait modifiers….
Tailwind CSS: How to create accordions (collapsible content)
This succinct and straight-to-the-point article shows you how to create accordions (collapsible content) with only Tailwind CSS (without any Javascript). Overview In the world of web development, an accordion can be expanded or collapsed to show…
Tailwind CSS: Use Margin and Padding with Custom Values
In Tailwind CSS, setting margin and padding is very convenient and flexible. Besides pre-defined utilities like m-1 (margin: 0.25rem), p-2 (padding: 0.5rem), etc, you can use an arbitrary value for margin and padding by putting that…
Styling a Login Page with Tailwind CSS
The complete example below shows you how to create a modern, elegant login page with the help of Tailwind CSS (I assume that you already have some understanding of Tailwind CSS and HTML). Preview Our login…
Tailwind CSS: Width and Height with Arbitrary Values
In Tailwind CSS, if utility classes with predefined values for width and height don’t suit your needs, you can use a custom value of your own on the fly by placing it in a pair of…
Tailwind CSS: How to use calc() function
The calc() function performs a calculation and dynamically produces the property value (usually related to width, height, margin, and padding). In Tailwind CSS, you can use the calc() function by putting it between a pair of…
Tailwind CSS: Create a Fixed/Sticky Footer Menu
A fixed/sticky footer will always be present and visible to the user no matter where they are on the page. In Tailwind CSS, you can implement a fixed footer navigation menu by combining the fixed utility…
Tailwind CSS: Style an Element Based on Its Sibling’s State
In Tailwind CSS, you can style an element based on the state of its previous sibling by using the peer marker. What you need to do is to add the peer class to that sibling, then…
