TailwindCSS | Group Selector

#html #css #webdev #tutorial

Hello my fellow frontend developers, today i will be showing 1 cool feature of tailwind css.

Group Selector

Consider an input field with an icon—let's say, a search icon inside search input field. If the input field is focused, you just want the search icon to appear. Tailwind group selector may be used to achieve these kinds of situations, where the focus or hover on the parent element also affects the styling of the child components.

Input Component

"use client";
import React, { useState } from "react";

const Input = ({
  inputClasses,
  iconClasses,
  focusClasses,
  keepDefaultInputClasses,
}: {
  inputClasses: string;
  iconClasses: string;
  focusClasses: string;
  keepDefaultInputClasses?: boolean;
}) => {
  const [search, setSearch] = useState("");

  return (
    <div className="relative overflow-hidden group">
      <label
        htmlFor="default-search"
        className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
      >
        Search
      </label>
      <input
        type="search"
        id="default-search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className={
          keepDefaultInputClasses
            ? `pl-8 pr-2 py-1.5 rounded-lg min-w-60 lg:min-w-72 focus:outline-none focus:border focus:border-gray-400 ${inputClasses}`
            : `${inputClasses}`
        }
      />
      <div
        className={`${iconClasses} ${search.length > 0 ? focusClasses : ""}`}
      >
        <svg
          aria-hidden="true"
          className="w-5 h-5 currentColor"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          ></path>
        </svg>
      </div>
    </div>
  );
};

Input.defaultProps = {
  inputClasses: "",
  iconClasses:
    "absolute inset-y-0 -left-8 group-hover:-left-0 transition-all duration-200 ease-in-out flex items-center pl-2 pointer-events-none",
  focusClasses: "",
};

export default Input;

Three elements make up this input component: an input area, a search icon, and a label intended specifically for screen readers.
The main div now has a tailwind class "group" applied to it, so everything within it will now be a part of this group.
Next, we have a few props: inputClasses (which pass the input field styles), iconsClasses (which pass the icon styles), focusClasses (which check if the input field has a value before applying the focus state; otherwise, it will only apply when a focus is present), keepDefaultInputClasses (which maintain the default values for the input field classes and add the manually added classes alongside the default classes), and search state (which tracks the input field values).

Input component usage

 <Input
    focusClasses="-left-0"
    keepDefaultInputClasses={true}
    iconClasses="absolute inset-y-0 -left-8 group-focus-within:-left-0 transition-all duration-200 ease-in-out flex items-center pl-2 pointer-events-none"
 />

focusClasses in this case will be "-left-0," which indicates that if a value is present in the input field, this class will be applied; * keepDefaultInputClasses is true, meaning that the default input classes will be used;
iconClasses - In this case, we are defining our transition effect for the focus. Initially, the icon will have the "-left-8" class, which will push it to the left side outside of the view;
group-focus-within:-left-0, which will make the icon visible by adding "-left-0," which is the left side starting point of the container;
Once the focus is removed from the input, the icon will again have the "-left-8" class, outside of the view.