CODEWITHSUNDEEP
csstailwind-css
aloisdg
aloisdg

Reputation: 23541

How can I use apply here?

I am using tailwind css to customize my menu. I have a bunch of buttons and I want to change the first letter of each button's content to show the linked shortcut. This is used by Blizzard in Warcraft3:

warcraft3 menu

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>


<div>
sd
</div>

jsfiddle to mess around

Upvotes: 5

Views: 3440

Answers (2)

hillin
hillin

Reputation: 1799

As of 2024, you can use @apply even with the CDN build. This is done by placing your style definition in a special <style> tag:

    <style type="text/tailwindcss">
        .custom {
            @apply flex flex-row;
        }
    </style>

Upvotes: 4

yunzen
yunzen

Reputation: 33449

@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.

Upvotes: 6

Related Questions