Tailwind CSS has grown in popularity over the years and now supports both pseudo-classes and pseudo-elements.
Tailwind CSS offers an innovative approach to building user interfaces with its utility-first CSS philosophy.
With Tailwind CSS integrated, you'll have access to comprehensive utility classes.
This is like a Lego set;
You start with a collection of simple blocks, but you can use them to build something complex and unique to your own needs and preferences.
The more building blocks you have, the more elaborate the structure you can create.
In my recent work, I needed a simple CSS background-image with a gradient as an overlay. And wanted to utilize pseudo-elements to create this gradient.
Pseudo-elements can be used to create and style background images, gradients, icons, and custom interactions.
Tailwind CSS can be integrated into your project in several ways.
According to the official Tailwind CSS documentation, you can use its Tailwind CLI, use PostCSS, or you can rely on Play CDN.
Getting Started with Tailwind CSS
Once you've installed Tailwind CSS and set up your project, it's time to dive into utility classes.
Let's briefly discuss class naming conventions in Tailwind CSS.
At first glance, the class names may seem cryptic, but fear not!
They follow a logical and intuitive structure. Each class name consists of one or more abbreviations that represent the CSS property or properties to which it applies.
If you want to add a margin to an element, you can use the class m-4. This is where m stands for margin and 4 represents the desired margin size.
Another example is if you want to set the text colour to red, you can apply the class text-red-500, where text signifies the text-related properties, and red-500 refers to the shade of red.
Once you get the hang of naming conventions, it's time to put your newfound knowledge into action.
Dig into your HTML markup and try Tailwind CSS classes wherever you need to style your elements.
Want a centred container? Apply the container mx-auto classes.
Need a bold and large heading? Add the text-4xl font-bold classes to your heading element.
As you experiment and apply different utility classes, you'll quickly realize TailwindCSS's power and flexibility.
You can effortlessly adjust margins, change colours, align elements, and even create responsive layouts, all by leveraging the pre-defined utility classes.
TailwindCSS embraces a mobile-first approach, which means you can easily make your webpage responsive by applying classes like sm:, md:, or lg:to target specific screen sizes. This way, your webpage will look great on various devices without custom media queries.
Understanding Pseudo Elements and Pseudo Classes
In web design, there are some nifty tricks called pseudo-elements and pseudo-classes that can add extra flair and interactivity to your website's elements.
Pseudo-elements, denoted by the colons :before and :after, allow you to insert new elements into your HTML without adding any extra markup. It's like having invisible helpers to decorate your elements with extra content or visual effects. You can think of them as virtual layers that sit in front of or behind your actual HTML elements.
On the other hand, pseudo-classes, such as :hover, :active, and many others, enable you to apply styles to elements based on different states or interactions. They're like special triggers that allow you to change the appearance of an element when someone hovers over it with their mouse or clicks on it.
Using pseudo-elements and pseudo-classes is not as complicated as it sounds.
To target specific elements, you simply attach these pseudo-selectors to the CSS rules you intend to apply.
We will discuss how we use both pseudo-elements and pseudo-classes.
Understanding and utilizing pseudo-elements and pseudo-classes is the key to adding that extra touch to your website.
Tailwind CSS Pseudo Element and Pseudo Classes
Let's dive into Tailwind CSS Pseudo Elements and Pseudo Classes. We will group them by its category.
Pseudo Classes
States
It is generally the case that the state pseudo-class comes into play when the user either performs an interaction or does not engage in any interaction.
Hover :hover
CSS hover states allow us to apply different styles to elements.
When we hover over them with our mouse, it adds interactivity. And makes that element more engaging for users.
When you hover over an element, like a button or a link, it can change its colour, and size, or even show cool animation.
Here's a simple example of Tailwind CSS code for the hover utility:
Button with hover:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700"
>Hover me</button>Thumbnail hover effect using group utility class:
<div class="group relative mt-8 w-80 h-40 overflow-hidden">
<img src="https://images.unsplash.com/photo-1687579520758-1dcecbc2c02d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Image"
class=" object-cover object-center w-full h-full group-hover:scale-150 group-hover:rotate-12 transition-transform duration-300 transform-gpu"
/>
<div
class="bg-black bg-opacity-50 flex items-center justify-center absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<p
class="text-white text-lg"
>Hover Effect</p>
</div>
</div>Focus :focus
The :focus state helps users know which element on a web page they are currently interacting with. It's especially useful for form inputs like text fields, checkboxes, or buttons.
When you click or tap on an input field, it activates the :focus state, indicating that you can type or interact with that specific element.
It's like giving it a little extra attention to let you know it's ready for your input.
To make it more noticeable, we can use Tailwind CSS to apply different styles to elements in the focus state. For example, when you click on a text field, it may have a coloured border or a shadow effect to show that it's currently active.
Here's a simple example of Tailwind CSS code for the focus utility:
<form class="relative">
<input
type="text"
id="name"
placeholder="John"
class="
w-full
px-4 py-2
border border-gray-300
rounded
focus:outline-none focus:border-2 focus:border-lime-500
"
/>
</form>Focus Within :focus-within
The CSS :focus-within state applies styles to not just the specific element you interact with, but also to its parent or container element.
It's like a ripple effect that draws attention to the whole area when you interact with any part of it.
When you click or tap on an input field or any other interactive element within a container, the :focus-within state is activated. This allows us to apply different styles to the container and its children, creating a cohesive visual effect.
The :focus-within state is particularly useful in forms and complex interactive components where you want to provide clear visual cues to users about their current focus and context within the page.
Here's a simple example of Tailwind CSS code for the focus-within utility:
<form
class="
p-4
bg-gray-200
rounded
focus-within:bg-yellow-200
transition-all duration-300">
<input
type="text"
id="username"
class="
w-full
px-4 py-2
border border-gray-300
rounded
focus:outline-none focus:border-blue-500"
placeholder="Enter your username">
</form>Focus Visible :focus-visible
The CSS :focus-visible state is designed to improve accessibility for users who navigate websites using a keyboard or other assistive technologies. It provides a visual indication of the element with keyboard focus.
When you press the Tab key on your keyboard to move between interactive elements like links or buttons, the :focus-visible state is activated.
This helps you see where you are on the webpage and which element is currently active or selected.
By default, web browsers usually provide a simple outline or border around the focused element when it's in the focus-visible state. This outline may differ from the one used in the CSS focus state, as it's specifically designed to be more noticeable and visible.
We can customize the :focus-visible state appearance using Tailwind CSS. We can change the colour, thickness, or style of the outline to match the website's design. This ensures it remains accessible and easy to identify.
Here's a simple example of Tailwind CSS code for the focus-visible utility:
<button
class="
p-4
bg-blue-500
text-white
rounded
focus:outline-none focus:ring-4 focus:ring-blue-200
focus-visible:ring-offset-4">
Click Me
</button>Active :active
The CSS active state makes elements on a web page look different when you're actively interacting with them. It's like visual feedback that shows you your action is being taken.
It's like when you press a physical button on a device and it turns down.
To make it more noticeable, we can use CSS to apply different styles to elements in the active state. For example, when you click on a button, it may change its colour or have a shadow effect to show that it's currently being pressed.
Here's a simple example of Tailwind CSS code for the active utility:
<button
class="
p-4
bg-blue-500
text-white
rounded
focus:outline-none
active:bg-blue-700
">
Click Me
</button>Visited :visited
The CSS :visited state helps you keep track of links you've visited. It makes it easier to navigate through websites and remember the pages you've explored.
When you click on a link and visit a web page, the :visited state is activated for that specific link. This allows the website to remember that you've already been there, and it can visually indicate that by changing the link's colour.
Here's a simple example of Tailwind CSS code for the visited utility:
<a
href="#"
class="
text-blue-500
visited:text-green-500
">
Visit This Link
</a>Structural
Target :target
The :target pseudo-class is a special feature in CSS that allows you to style an element that is the target of a fragment identifier in the URL.
In simpler terms, it lets you apply different styles to a specific section of a webpage when you click on a corresponding link.
If you click on a link that says "Jump to Section 3," and the URL changes to include "#section3" at the end, the :target pseudo-class is activated. This allows you to apply specific styles to Section 3, making it visually distinct from the other sections on the page.
We can use the :target pseudo-class to change the background colour, add animations, or modify any other visual aspect of the targeted section.
It helps create a smooth and interactive browsing experience, especially for single-page websites or those with lots of content.
Here's a simple example of Tailwind CSS code for the target utility:
<ol class="mb-8">
<li>
<a
href="#highlight-1"
class="font-bold text-lg mb-4">
Highlight 1
</a>
</li>
<li>
<a
href="#highlight-2"
class="font-bold text-lg mb-4">
Highlight 2
</a>
</li>
</ol>
<p
id="highlight-1"
class="target:text-blue-500">
Target content highlight 1
</p>
<p
id="highlight-2"
class="target:text-green-500">
Target content highlight 2
</p>First :first
The :first pseudo-class allows you to select and style the first occurrence of a particular element within its parent container.
For example, let's say you have an unordered list (a list with bullet points) on a webpage. If you want to make the first list item stand out by changing its colour or adding a different background, you can use the :first pseudo-class.
By applying CSS styles to the :first pseudo-class, you can make the first item in the list appear unique from the rest. It's a handy way to draw attention to important information or highlight the beginning of a series of items.
We can use the :first pseudo-class to customize the appearance of various elements on a webpage, such as the first paragraph in an article, the first image in a gallery, or the first link in a navigation menu.
Here's a simple example of Tailwind CSS code for the first utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div role="list" class="space-y-2 p-8 bg-blue-100" id="app">
<p v-for="item in list" :key="item.id" class="first:bg-blue-500">
{{ item.text }}
</p>
</div>
<script type="module">
const {
createApp
} = Vue;
createApp({
data() {
return {
list: [{
id: 1,
text: "First item"
},
{
id: 2,
text: "Second item"
},
{
id: 3,
text: "Third item"
},
{
id: 4,
text: "Fourth item"
}
]
};
},
}).mount("#app");
</script>Last :last
The :last pseudo-class allows you to select and style the last occurrence of a particular element within its parent container.
For example, let's say you have a series of images displayed in a gallery on a webpage. If you want to make the last image appear distinct by adding a border or applying a different effect, you can use the :last pseudo-class.
By applying CSS styles to the :last pseudo-class, you can make the last item in a list or a specific element stand out. It's a useful way to draw attention to the final piece of content or create a finishing touch for a collection of items.
We can use the :last pseudo-class to customize the appearance of various elements, such as the last paragraph in an article, the last item in a menu, or the last link in a navigation bar.
Here's a simple example of Tailwind CSS code for the last utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div role="list" class="space-y-2 p-8 bg-blue-100" id="app">
<p v-for="item in list" :key="item.id" class="last:bg-blue-500">
{{ item.text }}
</p>
</div>
<script type="module">
const {
createApp
} = Vue;
createApp({
data() {
return {
list: [{
id: 1,
text: "First item"
},
{
id: 2,
text: "Second item"
},
{
id: 3,
text: "Third item"
},
{
id: 4,
text: "Fourth item"
}
]
};
},
}).mount("#app");
</script>Only :only
The :only pseudo-class allows you to select and style an element that is the only occurrence of its type within its parent container.
Let's say you have a paragraph of text on a webpage, and it's the only paragraph within its container. If you want to make that paragraph look different by changing its font colour or adding a unique background, you can use the :only pseudo-class.
Applying CSS styles to the :only pseudo-class can make the solitary element appear distinct and catch the reader's attention.
It's a great way to emphasize an element's uniqueness and create visual interest.
We can use the :only pseudo-class to customize the appearance of various elements, such as the only image in a particular section, the only button on a page, or the only heading at a certain level.
Here's a simple example of Tailwind CSS code for the only utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div role="list" class="space-y-4 p-8 bg-blue-100" id="app">
<ul>
<li v-for="(item, index) in hasSibling" :key="index" class="only:bg-blue-500">{{ item.text }}</li>
</ul>
<ul>
<li v-for="(item, index) in hasNoSibling" :key="index" class="only:bg-blue-500">{{ item.text }}</li>
</ul>
</div>
<script type="module">
const {
createApp
} = Vue;
createApp({
data() {
return {
hasSibling: [{
text: "This First item has no sibling",
},
{
text: "This second item has no sibling",
},
],
hasNoSibling: [{
text: "This item has no sibling",
}, ],
};
},
}).mount("#app");
</script>Odd :odd
The :odd pseudo-class allows you to select and style odd-numbered elements within a container. It's a great way to create a visual pattern or differentiate elements in a repetitive list.
Imagine you have a list of items on a webpage. Using the :odd pseudo-class, you can apply different styles to every other item in the list, making them stand out from the rest.
This can be done by changing the background colour, adding a border, or any other visual effect.
The :odd pseudo-class selects elements based on their position within the container, starting with the first one. So, if you have a list of 1, 2, 3, 4, 5, the :odd pseudo-class will select elements 1, 3, and 5 because they are in odd positions.
We can use the :odd pseudo-class to style tables, alternating rows in a different colour, or create a zebra-striped effect, making it easier to read and navigate through the content.
Here's a simple example of Tailwind CSS code for the odd utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<ul role="list" class="space-y-2 p-8 bg-blue-100" id="app">
<li v-for="item in list" :key="item.id" class="odd:bg-blue-500">
{{ item.text }}
</li>
</ul>
<script type="module">
const { createApp } = Vue;
createApp({
data() {
return {
list: [
{
text: "First item"
},
{
text: "Second item"
},
{
text: "Third item"
}
]
};
},
}).mount("#app");
</script>Even :even
Similar to :odd but the :even pseudo-class select and style even-numbered elements within a container. It helps create a visual pattern and maintain consistency among elements.
Imagine you have a list of items on a webpage. Using the :even pseudo-class, you can apply the same styles to every other item in the list, creating a uniform look. This can be done by setting the same background colour, font style, or other visual property.
The :even pseudo-class selects elements based on their position within the container, starting with the first one. So, if you have a list of 1, 2, 3, 4, 5, the :even pseudo-class will select elements 2 and 4 because they are in even positions.
We can use the :even pseudo-class to style tables, ensuring consistent formatting for rows or columns. It helps maintain a visually pleasing and organized layout, especially when dealing with large amounts of data.
Here's a simple example of Tailwind CSS code for the even utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<ul role="list" class="space-y-2 p-8 bg-blue-100" id="app">
<li v-for="item in list" :key="item.id" class="even:bg-blue-500">
{{ item.text }}
</li>
</ul>
<script type="module">
const { createApp } = Vue;
createApp({
data() {
return {
list: [
{
text: "First item"
},
{
text: "Second item"
},
{
text: "Third item"
}
]
};
},
}).mount("#app");
</script>First of Type :first-of-type
The :first-of-type allows you to select and style the first occurrence of a specific element type within its parent container.
If you have a webpage with multiple paragraphs. Then you want to make the first paragraph look unique by changing its font size or adding a special border. You can use the :first-of-type pseudo-class.
By applying CSS styles to the :first-of-type pseudo-class, you can make the first occurrence of a particular element type stand out from the others.
It helps draw attention to important information or establish a visual hierarchy within a content section.
We can use the :first-of-type pseudo-class to customize the appearance of various elements, such as the first heading in an article, the first image in a gallery, or the first list item in a series.
Here's a simple example of Tailwind CSS code for the first-of-type utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-2 p-8 bg-blue-100" id="app">
<div v-for="item in list" :key="item.id" class="first-of-type:bg-blue-500">
{{ item.text }}
</div>
</div>
<script type="module">
const {
createApp
} = Vue;
createApp({
data() {
return {
list: [{
text: "First item",
},
{
text: "Second item"
},
{
text: "Third item"
}
]
};
},
}).mount("#app");
</script>Last of Type :last-of-type
Similar with :first-of-type, the :last-of-type pseudo-class allows you to select and style the last occurrence of a specific element type within its parent container.
Let's say you have a webpage with multiple images displayed in a gallery. If you want to make the last image appear distinct by applying a special filter or adding a border, you can use the :last-of-type pseudo-class.
By applying CSS styles to the :last-of-type pseudo-class, you can make the final occurrence of a particular element type stand out from the others. It helps create a finishing touch or emphasizes the concluding element within a group.
We can use the :last-of-type pseudo-class to customize the appearance of various elements, such as the last paragraph in an article, the last link in a navigation menu, or the last list item in a series.
Here's a simple example of Tailwind CSS code for the last-of-type utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-2 p-8 bg-blue-100" id="app">
<div v-for="item in list" :key="item.id" class="last-of-type:bg-blue-500">
{{ item.text }}
</div>
</div>
<script type="module">
const {
createApp
} = Vue;
createApp({
data() {
return {
list: [{
text: "First item",
},
{
text: "Second item"
},
{
text: "Third item"
}
]
};
},
}).mount("#app");
</script>Only of Type :only-of-type
The :only-of-type pseudo-class allows you to select and style an element when it's the only occurrence of its type within its parent container.
Imagine you have a webpage with multiple headings. If you want to make the only h1 heading on the page appear distinct by changing its font style or adding a unique background, you can use the :only-of-type pseudo-class.
By applying CSS styles to the :only-of-type pseudo-class, you can make the solitary occurrence of a particular element type stand out. It helps highlight the element's uniqueness and creates visual emphasis.
We can use the :only-of-type pseudo-class to customize the appearance of various elements, such as the only image in a specific section, the only button on a page, or the only paragraph of a particular type.
Here's a simple example of Tailwind CSS code for the only-of-type utility:
Validation
Empty :empty
The :empty pseudo-class allows you to select and style elements that have no content inside them.
Imagine you have a div element on a webpage. If you want to apply a specific background colour or border to the div when it doesn't have any text or other elements inside it, you can use the :empty pseudo-class.
By applying CSS styles to the :empty pseudo-class, you can make empty elements stand out or give them a different appearance. It's a way to visually indicate that there is no content within that element.
We can use the :empty pseudo-class to customize the appearance of various elements, such as empty divs, empty paragraphs, or empty spans. It helps create visual cues for users and highlights areas where content is missing.
Here's a simple example of Tailwind CSS code for the empty utility:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<ul role="list" class="space-y-2 p-8 bg-blue-100" id="app">
<li v-for="item in list" :key="item.id" class="empty:p-2 empty:bg-blue-500">
{{ item.text }}
</li>
</ul>
<script type="module">
const { createApp } = Vue;
createApp({
data() {
return {
list: [
{
text: "First item"
},
{
text: ""
},
{
text: "Third item"
}
]
};
},
}).mount("#app");
</script>Disabled :disabled
The :disabled pseudo-class allows you to select and style disabled elements. This typically occurs when an element, such as a button or input field, is not available for interaction or input.
For example, imagine you have a form with a submit button. If you want to visually indicate that the button is disabled and cannot be clicked, you can use the :disabled pseudo-class.
By applying CSS styles to the :disabled pseudo-class, you can change the appearance of disabled elements, such as altering their colour, and opacity, or adding a visual indicator like a strike-through effect.
We can use the :disabled pseudo-class to provide visual feedback to users, indicating that certain actions or inputs are temporarily unavailable. It prevents confusion and sets clear expectations about elements' functionality.
Here's a simple example of Tailwind CSS code for the disabled utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100">
<input type="text" class="disabled:opacity-50 bg-white" disabled>
</div>Enabled :enabled
The :enabled pseudo-class allows you to select and style elements that are in an enabled state. This means they are available for user interaction or input.
For example, you have a form with a text input field. When the input field is enabled, you can type into it and interact with it freely. The :enabled pseudo-class helps maintain the default appearance of such elements.
By applying CSS styles to the :enabled pseudo-class, you can ensure that elements look visually normal and ready for use. You can customize their appearance, such as colour, background, or borders.
We can the :enabled pseudo-class to provide visual cues to users, indicating that certain buttons or input fields are active and can be interacted with. It helps create a responsive and user-friendly interface.
Here's a simple example of Tailwind CSS code for the enabled utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100">
<input type="text" class="bg-white enabled:border enabled:border-blue-300">
</div>Checked :checked
The :checked pseudo-class allows you to select and style checked state elements.
Imagine you have checkboxes on a form. When you click on a checkbox, it becomes checked or marked. The :checked pseudo-class helps style these checked checkboxes differently, such as by changing their colour or applying a specific visual effect.
By applying CSS styles to the :checked pseudo-class, you can customize checked elements' appearance. It helps provide visual feedback to users, indicating their selection and differentiating them from unchecked options.
We can use the :checked pseudo-class to enhance the user interface of forms and provide a clear indication of selected options. It ensures that users can easily identify their chosen checkboxes, radio buttons, or other input elements.
Here's a simple example of Tailwind CSS code for the checked utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100">
<input type="checkbox" class="appearance-none w-4 h-4 bg-white checked:bg-green-500">
</div>Indeterminate :indeterminate
The :indeterminate pseudo-class allows you to select and style checkboxes and radio buttons in an indeterminate state. This state occurs when a checkbox is neither checked nor radio buttons nor unchecked but falls into a third state.
Imagine you have a checkbox and radio buttons representing a category with multiple sub-items. When some, but not all, sub-items are selected, the parent checkbox may appear indeterminate, indicating that it contains a mix of selected and unselected sub-items.
By applying CSS styles to the :indeterminate pseudo-class, you can customize the checkbox and radio buttons' appearance in this intermediate state. It helps provide visual feedback to users, indicating that the selection is not entirely checked or unchecked.
We can use the :indeterminate pseudo-class to enhance the user interface and convey complex checkbox and radio button states. It ensures that users can understand and interact with checkboxes with multiple levels of selection.
Here's a simple example of Tailwind CSS code for the indeterminate utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100">
<input id="demo" type="checkbox" onclick="toggle(this)" class="appearance-none w-4 h-4 bg-white checked:bg-green-500 indeterminate:bg-red-500">
</div>
<script>
function toggle(demo) {
if (demo.readOnly) demo.checked=demo.readOnly=false;
else if (!demo.checked) demo.readOnly=demo.indeterminate=true;
}
</script>The code above will rotate the state from unchecked(white)-checked(green)-indeterminate(red).
Default :default
The :default pseudo-class allows you to select and style the default input fields. These fields are preselected or set by default when the webpage loads.
For example, imagine you have a form with various input fields. When you open the page, one of the input fields may already have a default value. This may be a pre-filled username or a pre-selected option from a dropdown menu. The :default pseudo-class helps style these default fields differently, such as by applying a distinct colour or adding a visual indicator.
By applying CSS styles to the :default pseudo-class, you can customize default input fields and make them stand out. It helps users by indicating the pre-selected or pre-filled nature of these fields.
We can use the :default pseudo-class to improve user experience and highlight important default values in forms. It ensures that users can easily identify and modify pre-selected or pre-filled inputs if needed.
Here's a simple example of Tailwind CSS code for the default utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="option-one" class="flex gap-2 items-center">
<input id="option-one" type="checkbox" class="appearance-none w-4 h-4 bg-white checked:bg-green-500 default:outline default:outline-offset-2 default:outline-2 default:outline-green-500/75" checked>
Option One
</label>
<label for="option-two" class="flex gap-2 items-center">
<input id="option-two" type="checkbox" class="appearance-none w-4 h-4 bg-white checked:bg-green-500 default:ring-2">
Option Two
</label>
</div>Required :required
The :required pseudo-class allows you to select and style input fields that must be filled out by the user. These fields are mandatory and must be completed before submitting the form.
For example, imagine filling out a registration form that asks for your name, email, and password. Some of these fields may be marked as required, indicating that you must provide the necessary information. The :required pseudo-class helps style these required fields differently, such as by adding an asterisk (*) or changing their background colour.
By applying CSS styles to the :required pseudo-class, you can visually emphasize the mandatory fields and draw attention to them. It helps ensure that users are aware of the required information and prompts them to provide the necessary data.
We can use the :required pseudo-class to improve form usability and guide users in filling out important fields. It ensures that users don't overlook essential information and prevents form submission errors.
Here's a simple example of Tailwind CSS code for the required utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="field-two" class="flex flex-col gap-2 w-64">
Field One
<input id="field-two" type="text" class="appearance-none bg-white " >
</label>
<label for="field-two" class="flex flex-col gap-2 w-64">
Field Two is Required
<input id="field-two" type="text" class="appearance-none bg-white required:border-2 required:border-red-200" required>
</label>
</div>Valid :valid
The :valid pseudo-class allows you to select and style input fields that contain valid or correctly formatted data. It helps provide visual feedback to users, indicating that the entered information meets the required criteria.
For example, imagine you're filling out an email address field. Once you enter a properly formatted email address, the field may change colour or show a checkmark. This is to indicate that the information you provided is valid. The :valid pseudo-class helps style these valid fields differently.
By applying CSS styles to the :valid pseudo-class, you can customize the appearance of input fields with valid data. It helps users easily identify that they've provided the correct information and reinforces the notion that their input is acceptable.
We can use the :valid pseudo-class to enhance form usability and provide real-time validation for users. It helps prevent errors and guides users in entering accurate information.
Here's a simple example of Tailwind CSS code for the valid utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="email" class="flex flex-col gap-2 w-64">
Field Two is Valid
<input id="email" type="email" class="appearance-none px-2 py-1 bg-white valid:bg-green-300" required>
</label>
</div>Invalid :invalid
Similar to :valid but the :invalid pseudo-class allows you to select and style input fields with invalid or incorrectly formatted data.
It helps provide visual feedback to users, indicating that the entered information does not meet the required criteria.
For example, if you enter a password that is too short or doesn't meet complexity requirements, the input field may change colour or display an error message. This is to indicate that the information you provided is invalid. The :invalid pseudo-class helps style these invalid fields differently.
By applying CSS styles to the :invalid pseudo-class, you can customize the appearance of input fields with invalid data. It helps users easily identify errors in their input and prompts them to correct the information.
We can use the :invalid pseudo-class to enhance form validation and provide immediate feedback to users when they enter incorrect information. It helps prevent the submission of erroneous data and guides users in providing accurate details.
Here's a simple example of Tailwind CSS code for the invalid utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="email" class="flex flex-col gap-2 w-64">
Field Two is Valid
<input id="email" type="email" class="appearance-none px-2 py-1 bg-white invalid:bg-red-300">
</label>
</div>In Range :in-range
The :in-range pseudo-class allows you to select and style range input elements within a specific range or value.
It helps provide visual feedback to users, indicating valid or allowed values for the input.
For example, imagine using a slider to select a value between 1 and 100. As you move the slider, the input value may change colour or show a visual indicator to indicate that it falls within the allowed range. The :in-range pseudo-class styles these values differently.
You can customize the appearance of range input elements within the specified range.
It helps users easily identify valid values and provides a visual representation of the range they can select.
We can use the :in-range pseudo-class to enhance the user interface of range inputs and give users a clear understanding of the allowable values. It ensures users stay within the defined range and prevents invalid values.
Here's a simple example of Tailwind CSS code for the in-range utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="amount" class="flex flex-col gap-2 w-64">
Fill number in range between 1 to 10
<input id="amount" type="number" min="1" max="10" value="0" class="appearance-none px-2 py-1 bg-white in-range:bg-green-300">
</label>
</div>Out of Range :out-of-range
Similar to :in-range, the :out-of-range pseudo-class allows you to select and apply styles to elements outside a specific range or value.
It helps provide visual feedback to users, indicating that the selected value is not within the allowed range.
For example, imagine using a slider to select a value between 1 and 100. If you move the slider beyond this range, the input value may change colour or show a visual indicator to indicate that it falls outside the allowed range. The :out-of-range pseudo-class styles these values differently.
You can customize the appearance of range input elements outside the specified range.
It helps users easily identify when they've selected too high or too low values, preventing invalid data.
Web designers often use the :out-of-range pseudo-class to enhance the user interface of range inputs and give users a clear understanding of the allowed range. It ensures that users select values within the defined limits and prevents input errors.
Here's a simple example of Tailwind CSS code for the out-of-range utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="amount" class="flex flex-col gap-2 w-64">
Fill number in range between 1 to 10
<input id="amount" type="number" min="1" max="10" value="1" class="appearance-none px-2 py-1 bg-white out-of-range:bg-red-300">
</label>
</div>Form Related
Placeholder Shown :placeholder-shown
The :placeholder-shown pseudo-class allows you to select and style input fields when placeholder text is visible. The placeholder text is the text that provides instructions or examples of what should be entered into the field.
For example, imagine you have an input field for an email address that displays the placeholder text "Enter your email address." When the field is empty or the placeholder text is visible, the :placeholder-shown pseudo-class can be used to style the input field differently, such as changing the text colour or applying a border.
You can customize the appearance of input fields when placeholder text is visible. It helps create visual cues to guide users and draw attention to the input field when it's empty or awaiting user input.
We can use the :placeholder-shown pseudo-class to enhance the user experience and provide additional visual indications of the input field's state. It helps users understand the purpose of the field and prompts them to enter the required information.
Here's a simple example of Tailwind CSS code for the placeholder-shown utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="name" class="flex flex-col gap-2 w-64">
Your name
<input id="name" type="text" placeholder="John Doe" class="appearance-none px-2 py-1 bg-white placeholder-shown:border placeholder-shown:border-green-300">
</label>
</div>Autofill :autofill
The :autofill pseudo-class allows you to select and style input fields that have been automatically filled by the browser or form autofill feature. It helps provide visual feedback to users, indicating that the field has been automatically populated.
For example, when you type your name into a form, the browser may suggest your previously entered name. Once you select it, the input field may change its appearance, such as applying a background colour or a specific border style. The :autofill pseudo-class styles these auto-filled fields differently.
By applying CSS styles to the :autofill pseudo-class, you can customize the appearance of input fields that have been auto-filled. It helps users easily identify which fields have been automatically filled and distinguishes them from manually entered fields.
We can use the :autofill pseudo-class to enhance the user interface and provide visual cues for auto-filled fields. It helps users quickly review their filled-in information and ensures that they are aware of the data being automatically populated.
Here's a simple example of Tailwind CSS code for the autofill utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<label for="name" class="flex flex-col gap-2 w-64">
Your name
<input name="name" type="text" class="appearance-none px-2 py-1 bg-white autofill:outline autofill:outline-yellow-300 autofill:!bg-yellow-100" autocomplete="name">
</label>
</div>Marker :marker
The :marker pseudo-class allows you to select and style the marker, such as the bullet point or number, of list items. It helps customize markers' appearance in lists.
For example, imagine you have an unordered list (a bullet-pointed list) with different items. By applying CSS styles to the :marker pseudo-class, you can change the colour, size, or style of the bullet points for each list item.
The :marker pseudo-class is useful when you want to add style or enhance your lists' visual presentation. It provides the flexibility to create customized designs by customizing the appearance of markers to match the overall theme or design of your webpage.
We can use the :marker pseudo-class to make lists more visually appealing or to create a consistent design across different sections of their website. It allows us to personalize markers' appearance and add creativity to their content.
Here's a simple example of Tailwind CSS code for the :marker utility:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 bg-blue-100 flex flex-col gap-8">
<ul role="list" class="marker:text-blue-400 marker:content-['→'] pl-5 space-y-3 text-slate-900">
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ul>
</div>File :file
The :file pseudo-class allows you to select and style file upload input fields. It helps customize the appearance of these fields and provides visual cues for users.
When you see an input field with the type "file" on a webpage, it usually has a button or a browse option that lets you select files from your computer. The :file pseudo-class allows you to apply CSS styles to this specific type of input field.
By applying CSS styles to the :file pseudo-class, you can change the appearance of the file uploads input field, such as its background colour, border, or text colour. It helps make the file input field more visually appealing and consistent with the overall design of the webpage.
We can use the :file pseudo-class to create custom styles for file upload fields, blending seamlessly with the rest of the page's design. It allows us to provide a better user experience by ensuring that the file upload field is easy to identify and interact with.
Here's a simple example of Tailwind CSS code for the :file utility:
<input type="file" id="myFile" class="file-input">
<label for="myFile" class="file-label">Choose a file</label>
.file-input[type="file"] {
display: none;
}
.file-label {
padding: 10px 20px;
background-color: #f0f0f0;
color: #333333;
cursor: pointer;
}
.file-label:hover {
background-color: #dddddd;
}
Backdrop :backdrop
The :backdrop pseudo-class allows you to select and style the background behind a modal window or pop-up. It helps create a dimming or overlay effect to focus the user's attention on the foreground content.
When you encounter a pop-up or modal window, the :backdrop pseudo-class styles the background behind it. It is often used to darken or blur the background, making the foreground content stand out.
By applying CSS styles to the :backdrop pseudo-class, you can customize the background behind the pop-up or modal window. It helps create a visually appealing and attention-grabbing effect, drawing the user's focus to the main content.
We can use the :backdrop pseudo-class to enhance the user experience and provide a clear distinction between the foreground and background content. It ensures that the pop-up or modal window captures the user's attention while maintaining a visually pleasing design.
Here's a simple example of Tailwind CSS code for the :backdrop utility:
<button id="openDialogButton">Open Dialog</button>
<dialog id="myDialog">
<p>This is a dialog box.</p>
<button id="closeDialogButton">Close</button>
</dialog>
#myDialog:backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
Other
Read Only :read-only
The :read-only pseudo-class allows you to select and style read-only input fields. It helps indicate that the user cannot modify the field's content.
When you come across an input field marked as read-only, it means that you can view the information but cannot change it. The :read-only pseudo-class styles these fields differently to indicate their non-editable nature.
By applying CSS styles to the :read-only pseudo-class, you can customize read-only input fields. It helps make them visually distinct, such as by changing their background colour or applying a different text colour. This is to indicate that the content is for viewing purposes only.
We can use the :read-only pseudo-class to improve the user experience and provide visual cues to users that certain fields are not editable. It ensures that users understand which fields they can modify and which ones are read-only, preventing accidental changes.
Here's a simple example of Tailwind CSS code for the :read-only utility:
<input type="text" class="input" readonly>
.input:read-only {
background-color: #f0f0f0;
color: #888888;
}
Pseudo Element
Structure
Before ::before
This pseudo-element ::before allows us to add content before an element. It's like having a virtual container right before the actual content of an element.
By using the ::before pseudo-element, we can insert content before the actual content of an element. It can be text, images, or even decorative elements like shapes or icons.
To use the :before pseudo-element, we define its styles in CSS, specifying the content we want to insert and applying any desired formatting. This way, we can add extra flair or important visual elements to our web page without modifying the original HTML structure.
Here's a simple example of Tailwind CSS code for the ::before utility:
<div class="box">World!</div>
.box::before {
content: "Hello, ";
font-weight: bold;
color: red;
}
After ::after
Similar to ::before, Pseudo-element ::after allows us to add content after an element. It's like having a virtual container right after the actual content of an element.
By using the ::after pseudo-element, we can insert content after the actual content of an element. It can be text, images, or even decorative elements like shapes or icons.
To use the :after pseudo-element, we define its styles in CSS, specifying the content we want to insert and applying any desired formatting. This way, we can add extra visual elements or important information to our web page without modifying the original HTML structure.
Here's a simple example of Tailwind CSS code for the ::after utility:
<div class="box">Hello</div>
.box::after {
content: " World!";
font-weight: bold;
color: blue;
}
Typography
First Letter ::first-letter
The ::first-letter pseudo-element allows you to style the first letter of a block of text or a paragraph in a unique way. It can be used to make the first letter bigger, apply a different font, change its color, or add decorative elements to enhance the visual appeal.
To apply styles to the first letter of a paragraph, you define the desired styles for the ::first-letter pseudo-class in your CSS code. This way, you can easily customize the initial letter without altering the rest of the text.
We can use the ::first-letter pseudo-class to add visual flair and emphasize the importance of the opening letter in a block of text. It can be particularly useful for headings, introductory paragraphs, or any content where you want to make a strong visual impact.
Here's a simple example of Tailwind CSS code for the ::first-letter utility:
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #ff0000;
}
First Line ::first-line
The ::first-line pseudo-element allows you to style the first line of a block of text or a paragraph separately. It's like having a special focus on the first line of your content.
To apply styles to the first line of a paragraph, you define the desired styles for the ::first-line pseudo-class in your CSS code. This allows you to easily differentiate the first line and create a unique visual impact.
We can use the ::first-line pseudo-class to make the opening line of a paragraph more noticeable or to emphasize key information. It can be particularly useful in introductory paragraphs, article excerpts, or any content where you want to grab the reader's attention right from the start.
Here's a simple example of Tailwind CSS code for the ::first-line utility:
p::first-line {
color: #ff0000;
font-weight: bold;
}Form Related
Placeholder ::placeholder
The ::placeholder pseudo-element allows you to style placeholder text within an input field or text area. Placeholder text is used to instruct or explain to users what to enter in the input field.
To style the placeholder text, you define the desired styles for the ::placeholder pseudo-class in your CSS code. This way, you can make the placeholder text stand out or blend seamlessly with the rest of your design.
Web designers often use the ::placeholder pseudo-class to enhance the user experience and provide clear instructions when filling out forms. It helps ensure that users understand what information is expected in each input field.
Here's a simple example of Tailwind CSS code for the ::placeholder utility:
<input type="text" placeholder="Enter your name">/* Webkit browsers */
::-webkit-input-placeholder {
color: #999999;
font-style: italic;
}
/* Mozilla Firefox */
:-moz-placeholder {
color: #999999;
font-style: italic;
}
/* Internet Explorer 10+ */
::-ms-input-placeholder {
color: #999999;
font-style: italic;
}
/* Microsoft Edge */
:-ms-input-placeholder {
color: #999999;
font-style: italic;
}
/* Standard */
::placeholder {
color: #999999;
font-style: italic;
}
In this example, we've provided styles for different vendor-specific pseudo-elements to ensure compatibility with various browsers. The placeholder text in an input field will be styled with a light gray color (#999999) and an italic font style.
Selection ::selection
The ::selection pseudo-element allows you to style selected text on a webpage. It's the visual effect you see when you click and drag your mouse to highlight a portion of text.
To style the selected text, you define the desired styles for the ::selection pseudo-element in your CSS code. This way, you can personalize the highlight of your selection and make it visually appealing.
Web designers often use the ::selection pseudo-element to add creativity and enhance the overall user experience. It allows them to customize the selected text and blend it seamlessly with their website's design aesthetic.
Here's a simple example of Tailwind CSS code for the ::selection utility:
/* Webkit browsers */
::-webkit-selection {
background-color: #ffcc00;
color: #000000;
}
/* Mozilla Firefox */
::selection {
background-color: #ffcc00;
color: #000000;
}Finally
Pseudo-classes and pseudo-elements provide exciting possibilities, even if they seem daunting. CSS pseudo-classes and pseudo-elements provide unique ways to enhance your designs and maximize their value. Before using them, test them carefully.
Make sure you bookmark this page so you can come back to it later!
Don't miss it: Best Lifetime Deals for Designers and Developers I'll Regret to Missed