tsdx
tsdx copied to clipboard
Setup with twind
I have been trying to make tailwind CSS work with tsdx but it seems I have to use a css-in-js along with it. So I am trying to make twind work for me but I am getting an error on import twind/shim
while running the example repo.
It would be great if somebody can show a working example of how to setup something like twind or twi.macro with tsdx.
The setup is working now with a successful build but the example repo doesn't seem to work. In fact, the error thrown by the parcel is kinda weird since it doesn't give any useful information.
ℹ️ Server running at http://localhost:1234
� Build failed.
@parcel/core: Failed to resolve 'assets/styles/index.css' from '../src/components/button/button.tsx'
I don't even have an index.css
import in my button.tsx
file. For your rederence:
import React, {
ButtonHTMLAttributes,
DetailedHTMLProps,
ReactNode,
} from 'react';
import { variants, sizes, colors, generateClassName } from './types';
export type ButtonProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
size?: keyof typeof sizes;
color?: typeof colors[number];
variant?: typeof variants[number];
/**
* If `true`, the button will be disabled.
*/
isDisabled?: boolean;
/**
* If added, the button will show an icon before the button's label.
*/
icon?: ReactNode;
};
...
This post could help the setup with tailwind: https://zach.codes/build-your-own-flexible-component-library-using-tsdx-typescript-tailwind-css-headless-ui/