How to use Tailwind properties and styles inside CSS files?

Sometimes we are forced to use some CSS styles inside our project even if we use third party libraries like Tailwind, so how we can use tailwind properties and styles inside CSS files?

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows frontend developers to quickly create modern and responsive user interfaces. Unlike typical CSS frameworks, Tailwind CSS focuses on offering a set of utility classes that can be directly applied to HTML elements to style them.

How to use Tailwind properties and styles inside CSS files?

First Make sure that Tailwind CSS is install and working.

Then inside the class we can use either @apply rule or theme function.

Here is an example using @apply rule:

globals.css

.element {
  @apply bg-slate-900 border border-slate-700 rounded-full;
}

also check Tailwind @apply rule
This is another example using theme function:

globals.css

.element {
  background-color: theme("colors.green.400");
  padding: theme("padding.3");
  border-radius: theme("borderRadius.lg");
}

also check Tailwind theme function