How to Access All Direct Children of a Div in Tailwind CSS ?
Last Updated :
02 Aug, 2023
In this article, we are going to learn how to access all the direct children of a div in Tailwind CSS. In Tailwind CSS, there is no specific utility class or built-in mechanism to directly access all the direct children of a div element. Tailwind CSS primarily focuses on providing utility classes for styling elements, rather than complex selector support.
Tailwind CSS is a popular utility-first CSS framework known for its simplicity and flexibility. When working with a div container, you may encounter scenarios where you need to access and style its direct children selectively.
There are several methods that can be used to access all the direct children of a div in tailwind CSS.
- Using arbitrary values
- Using @layer directive
Approach 1: Using arbitrary values
The arbitrary values are the custom values that can extend or override the default utility classes provided by Tailwind. Here, we are going to use arbitrary values to target the children of a div directly and then apply the styles using Tailwind CSS.
Syntax:
[& > *]: tailwind-classes
Example: The below example demonstrates accessing the direct children of a div in tailwind CSS using arbitrary values.
In the below example, we are using the Tailwind CDN to solve the problem, so there is no need to install Tailwind CSS.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 class="text-4xl
text-green-600
text-center font-bold">
GeeksforGeeks
</h1>
<h2 class="text-3xl">
How to access all the direct children
of a div in Tailwind CSS
</h2>
<div class="my-container [&>*]:bg-green-600
text-center">
<p>Java</p>
<p>C++</p>
<p>Python</p>
<p>JavaScript</p>
</div>
</body>
</html>
|
Output:
Approach 2: Using @layer directive
In this approach, we will use the @layer directive as it allows us to organize the CSS styles into different layers, making it easier to manage and maintain our stylesheets.
Syntax:
@layer base {
div.section > div {
@apply text-lg;
}
}
As the @layer directive requires the tailwind CSS to be installed locally, so we now have to create a project for HTML and CSS so that we can access all the direct children of a div. Below are the complete steps:
Step 1: Create a project
mkdir myproject
cd myproject
Step 2: Make a new src folder and install Tailwind
npm install -D tailwindcss
npx tailwindcss init
Step 3: Configure Tailwind paths
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Step 4: Create an HTML and CSS file and add the below code to the CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Add a @layer directive
@layer base {
.class-name > html_element {
@apply styles;
}
}
To run the above code, start the Tailwind CLI process by opening the package.json and modify the file as below:
"scripts":{
"dev":"npx tailwindcss -i ./styles/tailwind.css -o ./styles/styles.css --watch"
},
Example: The below example demonstrates accessing the direct children of a div in tailwind CSS using layer directive.
index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<link href="/styles.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-center text-4xl
font-bold text-green-600">
GeeksforGeeks
</h1>
<h2 class="text-3xl">
How to access all the direct children
of a div in Tailwind CSS
</h2>
<div class="my-container text-center">
<p>Java</p>
<p>C++</p>
<p>Python</p>
<p>JavaScript</p>
</div>
</body>
</html>
|
styles.css file
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
.my-container>p {
@apply text-2xl text-green-400;
}
}
|
Run the server:
npm run dev
Output:
Share your thoughts in the comments
Please Login to comment...