jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.22k stars 507 forks source link

Setup with twind #998

Open sibasishm opened 3 years ago

sibasishm commented 3 years ago

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.

sibasishm commented 3 years ago

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;
};
...
PedroAugustoRamalhoDuarte commented 1 year ago

This post could help the setup with tailwind: https://zach.codes/build-your-own-flexible-component-library-using-tsdx-typescript-tailwind-css-headless-ui/