On gists

Arbitrary props / variants / styling by parent

Popular ⭐ Tailwind CSS

demo.html Raw #

<!-- https://play.tailwindcss.com/yyRSjWdDIv -->
<!--
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
-->
<section class="m-5 *:mb-2 *:border *:text-red-400 [&_p]:text-blue-500">
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <p>Para 1</p>
  <p>Para 2</p>
  <div>text 6</div>
</section>


<div class="[&:nth-child(3)]:py-0">
  <!-- ... -->
</div>








<ul role="list" class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow">
  <li class="flex"> <!-- ... -->
</ul>


<ul
  role="list"
  class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow hover:[&>li:nth-child(2)>div>p:first-child]:text-indigo-500"
>
    
    
    
<ul class="m-5 [&>*:not(:last-child)]:text-green-500">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul


<ul class="m-5 [&>*:not(:last-child)]:after:content-[':)']">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
</ul>


<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  
<div class="bg-[url('/what_a_rush.png')]">
  
  
  
When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:

<!-- Will generate a font-size utility -->
<div class="text-[22px]">...</div>

<!-- Will generate a color utility -->
<div class="text-[#bada55]">...</div>
Sometimes it really is ambiguous though, for example when using CSS variables:

<div class="text-[var(--my-var)]">...</div>
In these situations, you can “hint” the underlying type to Tailwind by adding a CSS data type before the value:

<!-- Will generate a font-size utility -->
<div class="text-[length:var(--my-var)]">...</div>

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">...</div>





<!--
  https://play.tailwindcss.com/sLrFGm1VtG
--


<!-- Via class, ale muze to chytnout i vyssi tridu, takze radsi jeste dat #ID na ten element a pres nej ve smyslu [#nejakeId.theme-light_&] -->
<section class="theme-light">
  <article>
    <div class="[.theme-light_&]:bg-red-200 [.theme-dark_&]:bg-gray-800">
      Obsah
    </div>
  </article>
</section>



<!-- Přes data atribut -->
<div data-theme="dark" class="[&[data-theme='light']]:bg-red-200 [&[data-theme='dark']]:bg-gray-800">
  Obsah
</div>

<!-- Nebo pro parent selector -->
<section data-theme="light">
  <div class="[[data-theme='light']_&]:bg-red-200 [[data-theme='dark']_&]:bg-gray-800">
    Obsah
  </div>
</section>


<!--

:root {
  --x: pink;
}
-->
<div class="hover:bg-[--x]"> kuku</div>