React App adding Pure CSS to Tailwind CSS

Question

I need to do this in tailwind CSS for my react application.

How can I do that?

HTML

<h1>Show / Hide Animation with pure CSS</h1>

<label class="trigger">
  <input type="checkbox" class="checkbox checkbox--red" /> Show additional information
  <span class="msg">
    Hey there, I'm fading in/out with pure CSS. How cool is that?!
  </span>
</label> 

CSS

/**
 * Notice: Checkbox is styled via import of my other pen (https://codepen.io/fxm90/pen/JdmaeL)
 */

.trigger {
  input[type="checkbox"] {
    
    // Hide content via default
    & + span {
      visibility: hidden;
      opacity: 0;
    
      transition: visibility 0s linear 0.33s, opacity 0.33s linear;
    }
    
    // Show if checkbox is clicked
    &:checked + span {
      visibility: visible;
      opacity: 1;
      
      transition-delay: 0s;
    }
  }
}

// Simple styling for message.
.msg {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  
  border: 1px solid #ddd;
  border-radius: 3px;
}

This is the same thing in the above code pen link.

Answer 1

**Edit as you need. I gave the basic example here. If you not find your solution, let me a reply**
import React, { useState } from "react";

const YourComponent = () => {
  const [checked, setChecked] = useState(false);
  const selectStyle = (e) => {
    const checked = e.target.checked;
    if (checked) {
      setChecked(true);
    } else {
      setChecked(false);
    }
  };`enter code here`
  return (
    <>
      <div className="px-20 my-10">
        <h1>Show / Hide Animation with pure CSS</h1>

        <label class="trigger">
          <input
            type="checkbox"
            class="checkbox checkbox--red"
            onClick={(e) => {
              selectStyle(e);
            }}
          />{" "}
          Show additional information
          <div
            className={
              checked
                ? "opacity-100 transition-opacity duration-1000 ease-out"
                : "opacity-0 transition-opacity duration-1000 ease-out"
            }
          >
            <span class="block mt-2 py-2 px-3 border border[#ddd] rounded ">
              Hey there, I'm fading in/out with pure CSS. How cool is that?!
            </span>
          </div>
        </label>
      </div>
    </>
  );
};

export default YourComponent;

Answer 2

firstly check if you have imported your css file

you have to go in your index.css then do this

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    li{
        @apply p-4;
    }
    button {
        @apply text-white border bg-indigo-500 border-indigo-600
        hover:bg-transparent hover:text-indigo-900 rounded-md
    }
}

otherwise you have to create a new file of css then type your own css also will word as usually where you can use fileName.module.css, fileName.css or define you React css property