A Tailwind CSS plugin that lets you use "conditions" as variants.
For example, in a desktop app (e.g. Electron), you might want to have different styles depending on the platform. Using this plugin, you can do the following:
-
Expose the value of the conditions in a parent DOM element, like
<html>
or the body. It is important that all values are set in the same element. Values can be set as classes (e.g..platform-linux
), attributes (e.g.[data-platform="linux"]
), or anything else that could be targeted with a CSS selector. -
Use the plugin in your Tailwind CSS config, and pass it the
conditions
option, which is a map of condition names to selectors. For example, you can set a property"win"
with a value of".platform-windows"
. This will make add thewin:
andnot-win:
variants, as well as making the condition available inif-[]:
variant expressions, for exampleif-[win|mac]:
. -
Use the variants! Some examples:
- Hide something on Windows:
win:hidden
. - Hide something for all platforms except Linux:
not-linux:hidden
. - Make something bold on macOS and Windows:
if-[mac|win]:font-bold
.
- Hide something on Windows:
The if-[]:
variant supports:
- Negation:
if-[!win]:
. - Conjunction ("and"):
if-[win&mac]:
. - Disjunction ("or"):
if-[win|mac]:
. - Parentheses for grouping:
if-[win|(mac&!linux)]:
. - Any combination of the above, for any number of conditions and levels of nesting.
The operator precedence is left-to-right by default, but you can use parentheses to override it.