Postcss Fns Inline

import { Layout } from '@/layout';

export const meta = { title: 'Can I use PostCSS function in inline styles?', description: 'Learn where PostCSS functions can be used in Mantine', slug: 'postcss-fns-inline', category: 'styles', tags: ['postcss', 'light-dark', 'mixin'], created_at: 'September 7, 2024', last_updated_at: 'September 7, 2024', };

export default Layout(meta);

What are PostCSS functions?

postcss-preset-mantine provides functions, mixins and other helpers to simplify working with Mantine styles. Example of using light-dark function in styles:

// What you write
.demo {
  background: light-dark(white, black);
}

// What you get after PostCSS processing
[data-mantine-color-scheme='light'] .demo {
  background: white;
}

[data-mantine-color-scheme='dark'] .demo {
  background: black;
}

Can I use PostCSS functions in inline styles?

No, PostCSS functions are not supported in inline styles. You can use PostCSS functions only in .css files. The following example will not work:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button
      style={{
        // ❌ This does not get processed by PostCSS
        backgroundColor: 'light-dark(white, black)',
      }}
    >
      Button
    </Button>
  );
}