How to convert Tailwind CSS into a class and put it in a CSS file?

Applying complex styles with Tailwind CSS @apply directive can be trickier than simply copying and pasting the utility classes from the element to the CSS file. The @apply directive can’t be used with styles that insert:

• content, like ::before and ::after selectors
• pseudo-classes such as :checked
• styles that have complex variants.

So you could refactor your code like this:

HTML

<div className="checkbox-style"></div>

CSS

.checkbox-style {
  @apply relative w-9 h-5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.checkbox-style:after {
  @apply absolute top-2 start-2 bg-white border-gray-300 border rounded-full h-4 w-4 transition-all;
}

.checkbox-style:focus-within {
  @apply outline-none ring-4 ring-blue-300 dark:ring-blue-800;
}

.checkbox-style:checked {
  background-color: #3182ce; /* blue-600 */
  transform: translateX(100%);
}

.checkbox-style:checked:after {
  border-color: white;
}

Unfortunately, the @apply directive with the peer variant in Tailwind might not work as expected in some cases due to its complexity. However, you can use:

JavaScript or React to handle the state of the checkbox and apply
styles based on its state

import React, { useState } from "react";
import "./App.css";

function App() {
  const [isChecked, setChecked] = useState(false);
  
  const toggleChecked = () => {
    setChecked(!isChecked);
  };

  return (
    <div 
      className={`checkbox-style ${isChecked ? "checked" : ""}`}
      onClick={toggleChecked}
    ></div>
  );
}

export default App;

Mantain them inline, like you are doing.

Tailwind CSS Just-In-Time (JIT) is an handle on-the-fly arbitrary styles that arise from using JavaScript, thus enabling better handling of pseudo-classes.

With the peer variants, you specify a state at an element’s level, but you want to apply a style to a "peer" element. However, even with JIT, the peer and peer-checked variants still work best with inline utility styles – not via your CSS files where you are using @apply directive.