Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Tailwind's docs provide a button example . It works as expected.

To change the color of my letter. I can use the css pseudo element first-letter .

But, there is a problem (or I would not be here). apply works in the tailwind example but not with my custom css. Does apply only, well, apply to tailwind's own css? What did I miss?

 .btn {
    @apply font-bold py-2 px-4 rounded; /* works as expected */
  .btn-blue {
    @apply bg-blue text-white; /* works as expected */
  .btn-blue:hover {
    @apply bg-blue-dark; /* works as expected */
.btn::first-letter {
  font-size: 130%; /* works as expected */
  @apply bg-orange; /* nope */
div::first-letter {
  font-size: 130%; /* works as expected */
  @apply bg-orange; /* nope */
div {
  @apply bg-red; /* nope */
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>
<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>
@apply is not CSS. It is a TailwindCSS directive that will change your CSS. But this is not possible using the CDN variant of TailwindCSS as stated here in the TailwindCSS installation guide (emphasis theirs)
  
Before getting started please note, many of the features that make
  Tailwind CSS great are not available using the CDN builds. To take
  full advantage of Tailwind's features, install Tailwind via npm.
The @apply is just ignored by CSS. If you carefully inspect the CSS in your browsers you would see that the classes .btn and .btn-blue have no effect whatsoever.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.