Closed Hanna922 closed 6 months ago
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;
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
styles.css (custom Tailwind)
main.tsx
App.tsx
Here's the source code. https://github.com/Hanna922/twin-macro-test
Thank you.