Custom Tailwind Properties in Twin.macro not working

[hanna]

Hello.

I'm trying to create custom Tailwind properties and apply them to twin.macro, but it's not working.
It seems to be unable to find the custom properties.
Could I be missing something?

My project is built with Vite, React, TypeScript, and Tailwind.

index.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./styles.css";

styles.css (custom Tailwind)

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

main.tsx

import './index.css'
...

App.tsx

import tw from "twin.macro";

const Test = () => {
  return (
    <Wrapper>
      <Text>Test</Text>
    </Wrapper>
  );
};

const Wrapper = tw.div`
  flex
  flex-col
  gap-4
  bg-white
  flex-center
`;
...

---

Here's the source code.
https://github.com/Hanna922/twin-macro-test

Thank you.

[Ben Rogerson]

You're adding a plain css class outside of tailwindcss there.

It'll work if you move the class to the Wrapper like this:

const Test = () => {
  return (
    <Wrapper className="flex-center">
      <Text>Test</Text>
    </Wrapper>
  );
};

In order to use the custom class like you've tried to, you can move it to a plugin, like this:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

const customPlugin = plugin(({ addBase }) => {
  addBase({
    ".flex-center": {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
  });
});

export default {
  // ...
  plugins: [customPlugin],
} satisfies Config;