How to setup create-react-app twin.macro and emotion

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

You know tailwind is a great tool, but you also may know that, in react world, it even gets better. We are talking about twin.macro here. It combines all the benefits of tailwind with all the benefits of the css-in-js approach.

• twin.macro

  57 7,802 6.1 TypeScript

  🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

You know tailwind is a great tool, but you also may know that, in react world, it even gets better. We are talking about twin.macro here. It combines all the benefits of tailwind with all the benefits of the css-in-js approach.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• twin.examples

  5 460 6.1 TypeScript

  Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.

You can pretty much follow all the steps from this tutorial, until this point where it tells you to extend JSX with a jsx-pragma in front of every twin.macro import. The documentation underneath says the following:

• craco

  32 7,361 6.4 TypeScript

  Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

  

One of these solutions is CRACO which stands for "Create React App Configuration Override". Sounds exactly what we need here, so let's get into it.

Suggest a related project