POC: Tailwind styled no code components

[timoconnellaus]

This is a PR for tailwind styled components including an example project

You can create tailwind styled components by adding a "tw" prop to the props object into the styles function. This works for arrays.

styles: ({ values }) => {
    const DummyCollectionStyles = values.DummyCollection.map(
      (dc: any) => `bg-[${dc.backgroundColorDummyCollection}]`
    );

    return {
      props: {
        tw: {
          Root: `bg-[${values.backgroundColor}] p-[${values.padding}]`,
          DummyCollectionOuterStyle:
            DummyCollectionStyles.length > 0
              ? DummyCollectionStyles
              : [undefined],
        },
      },
    };
  }

Responsiveness is handled using the tailwind convention where the default is mobile and exceptions are large screens. This doesn't change the way the editor is used where it is desktop first. The screen size prefixes are automatically calculated based on the responsive values selected

This feature does not include the generation of the tailwind CSS. That is handled by the application that is embedding easyblocks. However, there is an example of this working in the example apps - it uses a library that can render tailwind in the browser. The accomodate this there is an extension to the editor window API to include subscribe to updates - this is used to trigger the render of the CSS.

[vercel[bot]]

@timoconnellaus is attempting to deploy a commit to the Shopstory Team on Vercel.

A member of the Team first needs to authorize it.