Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Question

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Recently, I implemented Tailwind CSS to style my application. It has been a helpful tool, but I am looking to consolidate all the CSS into one file for better organization. I want to keep it separate from the HTML code.

My attempt to convert the following div element:

<div className="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>

using the command below (added to my app.css file):

.checkbox-style {
  @apply relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600;
}

Unfortunately, this approach did not work as expected and I encountered an error stating unknown rule at apply. Is there a way to fix this issue?

For context, I am currently using Tailwind CSS version 3.4.1 in combination with React version 18.2.0.

css reactjs tailwind-css

Answer 1

Answer №1

Using Tailwind CSS @apply directive for applying intricate styles can be more challenging than simply copying and pasting utility classes from the element to the CSS file. The @apply directive is not compatible with styles that include:

content, like ::before and ::after selectors
pseudo-classes such as :checked
complex variant styles.

To make your code more manageable, consider refactoring it in this way:

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;
}

Although the @apply directive with the peer variant in Tailwind may not function as expected in certain cases due to its complexity. Consider using:

JavaScript or React to manage the checkbox state 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;

Keep them inline, as you are currently doing.

Tailwind CSS Just-In-Time (JIT) allows for dynamic creation of styles through JavaScript, enhancing the management of pseudo-classes.

When using the peer variants, you define a state at an element's level but wish to apply a style to a "peer" element. However, even with JIT, the peer and peer-checked variants perform best with inline utility styles rather than in your CSS files where @apply directive is utilized.

Answer 2

Using Tailwind CSS @apply directive for applying intricate styles can be more challenging than simply copying and pasting utility classes from the element to the CSS file. The @apply directive is not compatible with styles that include:

content, like ::before and ::after selectors
pseudo-classes such as :checked
complex variant styles.

To make your code more manageable, consider refactoring it in this way:

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;
}

Although the @apply directive with the peer variant in Tailwind may not function as expected in certain cases due to its complexity. Consider using:

JavaScript or React to manage the checkbox state 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;

Keep them inline, as you are currently doing.

Tailwind CSS Just-In-Time (JIT) allows for dynamic creation of styles through JavaScript, enhancing the management of pseudo-classes.

When using the peer variants, you define a state at an element's level but wish to apply a style to a "peer" element. However, even with JIT, the peer and peer-checked variants perform best with inline utility styles rather than in your CSS files where @apply directive is utilized.

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Answer №1

Similar questions

The Bootstrap Dynamic Navbar is not adjusting for mobile devices because of the addition of a logo

Set the value obtained from a resolved promise to a mutable reference object in a React component

What is the reason behind the router.query not functioning correctly in the app/ directory with page.js, but functioning properly when relocated to the pages/ directory with index.js

Turn off images using Selenium Python

Conceal user input field in React using a hook

Aligning multiple items to the right using Flexbox

The React button's onclick event is not displaying files from the file system as expected. Instead, no matter which link is clicked, it always shows the last file in the files object

Resolve the issue with the sticky positioning

Issues with rendering in Next.jsORErrors encountered during rendering

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Experiencing difficulties sending AJAX requests to an Express server while utilizing React Router

Is there a potential race condition in React when switching between lists?

Limit file selection to images using MUI File Input

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

Making a POST request to a Next.js API route results in a 500 Internal Server Error being sent back

hover causing the table cell to act erratically

Incorporating pre-designed elements into the bottom section of my

What is the most effective way to incorporate animated hyperlinks?

Is it possible to include Helvetica or a similar font in my web application for shipping?

Is there a way to conceal the parent element when the child element is hidden from view?