Search code examples
tailwind-css

How to use Tailwind CDN with apply in style tag?

How to make Tailwind CSS to process <style> with @apply?

In the example below the @apply doesn't work:

<!doctype html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>.custom { @apply bg-red-500; }</style>
</head>
<body>
  <div class="text-red-500">Works</div>
  <div class="custom ">Doesn't work</div>
</body>
</html>

P.S. Maybe it's possible to make it work with some additional JS?

Solution

  • As per the documentation about the CDN (step 3), add type="text/tailwindcss" to the <style> tag to have it be processed by Tailwind:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<style type="text/tailwindcss">.custom { @apply bg-red-500; }</style>

<div class="text-red-500">Works</div>
<div class="custom ">Doesn't work</div>