CODEWITHSUNDEEP
tailwind-css
Sig
Sig

Reputation: 5916

TailwindCSS focus + placeholder in CSS file

Is it possible to move the class focus:placeholder-gray-600 from the HTML into a CSS file?

From the following HTML

<input class="focus:placeholder-gray-600" type="text">

And I'd like to have

<input class="my-class" type="text"> 

#styles.css

.my-class {
  ...
}

Upvotes: 1

Views: 2781

Answers (1)

DAG
DAG

Reputation: 6994

Yes you can do that with tailwind css, but not with just css files.

You would need to process your css files with PostCSS and then follow the steps outlined in the documentation under Extracting CSS components with @apply

The basic idea is, to use the tailwind-provided @apply postcss directive:

<style>
.my-class:focus {
  @apply placeholder-gray-600;
}
</style>

Note, that the focus aspect has to be used like in "regular" css with the pseudo selector in the class declaration instead of doing this:

/** INVALID **/
.my-class {
  @apply focus:placeholder-gray-600;
}

See also this note from the docs:

Note that variants like hover:, focus:, and {screen}: can't be applied directly, so instead apply the plain version of the utility to the appropriate pseudo-selector or media query.

Upvotes: 1

Related Questions