Tailwind:Functions

lastmod 2024-03-09created 2024-03-092 edits

theme()

Use the theme() function to access your Tailwind config values using dot notation.

This can be a useful alternative to @apply when you want to reference a value from your theme configuration for only part of a declaration.

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

If you need to access a value that contains a dot (like the 2.5 value in the spacing scale), you can use square bracket notation.

.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}

Since Tailwind defines its default color palette using a nested object syntax, you need to use dot notation to access nested colors.

Don't use the dash syntax when accessing nested color values

.btn-blue {
  background-color: theme('colors.blue-500');     // ERROR !!!
}

Use dot notation to access nested color values

.btn-blue {
  background-color: theme('colors.blue.500');
}

The screen function lets you create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.

@media screen(sm) {
  /* ... */
}

This resolves to the underlying screen value at build time, generating a regular media query that matches the specified breakpoint.

@media (min-width: 640px) {
  /* ... */
}

author Zer0 sitemap