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.

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

styles.css file

Run the server:

npm run dev

Output: