How to Build A React TS Tailwind Design System

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Access the most powerful time series database as a service
  • twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

    "Twind is a no-build-step tailwind-first CSS-in-JS library which allows seamless integration with existing Tailwind HTML using the twind/shim module. This feature can be used together with your favorite framework without any additional setup. twind/shim dynamically detects used Tailwind classes within the HTML document, creates the corresponding CSS rules, and injects these into a stylesheet. Here is an example to play with. By shipping the compiler (rather than the resultant output) there is a known and fixed cost associated with styling. No matter how many styles you write or how many variants you use, all that your users will ever have to download is approximately 12KB of code (which is less than styled-components or your average purged Tailwind build). On the server, we can use twind/shim/server to generate the initial CSS to be included in the HTML. Unlike Tailwind, Twind is not limited to the restrictions of a class name strings as input. One pain-point commonly felt when using utility CSS is long and unwieldy lines of code consisting of class names, often denoting styles at various breakpoints, which are quite hard to comprehend. It is not uncommon for a single element to have tens of rules applied to it. Twind provides a grouping syntax to combine common variants or prefixes. Both responsive and pseudo variants are supported in various combinations: bg-red-500 shadow-xs md:(bg-red-700 shadow) lg:(bg-red-800 shadow-xl). Because Twind is generating CSS during runtime there is no need to restrict the usage of variants. Every variant can be applied to every class. Additionally, variants can be stacked like hover:focus:text-blue-700. The Twind documentation site contains an overview of all extensions. As a convenient escape hatch for all those one-off styles which aren't supported by Tailwind, Twind allows writing arbitrary CSS making it a full CSS-in-JS solution."

  • react-tw-blog-post

    A component library built with React + Tailwind + TSDX for a blog post.

    If you want to skip ahead to the "How to" section click here, or if you want to go straight ahead to the final code, check out the repository here.

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • twin.macro

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

  • formik

    Build forms in React, without the tears 😭 [Moved to:]

    For those of you not familiar with Jared, he is behind projects like formik and razzle. Also, he has been heard to be seen sparingly next to a mad beat maker, wearing a neck chain and boxer shorts with an American bald eagle (shout out Kenny! ✊🏽), while talking into a mic on the Undefined Podcast.

  • twin.examples

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

    Alright, I had my tools in place and it was time to start connecting the dots, so to speak. I kicked off a new TSDX project, installed Styled components, and then went on to try and set up twin.macro. However, I hit a snag there... In the Twin example repo, there was no Styled Components + Storybook example, so I configured what seemed to make sense. Then I went on to add some samples, imported them into a new Story, and tried to run Storybook. It didn't work as expected. Some of the code worked and other components that were using the tw syntax didn't:

  • twin-tsdx-component-lib

    A boilerplate for a component library with Twin based on TDSX

    You can check out the TSDX-Twin repo here that has 1 out of 3 components working.

  • identity-obj-proxy

    An identity object using ES6 proxies. Useful for mocking webpack imports like CSS Modules.

    Well, Jest doesn't know how to read CSS. Also, it doesn't really care about it either, so we will have to mock it for him with identity-obj-proxy (to learn more about why go here). Let's add it:

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • tailwindcss-classnames

    Functional typed classnames for TailwindCSS

    One last thing that can be helpful is using a library like [tailwind-classnames]( which helps validate you are using correct class names, and if you don't TS will yell at you. It has the full capability and API of the known [classnames]( library, as it is just an extension of it.

  • jest-styled-components

    🔧 💅 Jest utilities for Styled Components

    If you add any dynamic CSS styles with Styled Components use jest-styled-components for testing.

  • tailwind-config-viewer

    A local UI tool for visualizing your Tailwind CSS configuration file.

    One more nifty tool that can help developers and designers alike working on a project like this is tailwind-config-viewer. As stated on the repo's page:

  • changesets

    🦋 A way to manage your versioning and changelogs with a focus on monorepos

    I plan on doing a follow-up post on how to publish using Github packages + CircleCI / Github Actions + Changesets. Perhaps, I'll even address how to publish to Bit.

  • TypeScript-Website

    The Website and web infrastructure for learning TypeScript

    All of the front-end apps are built with React and adopted Styled Components at some point. Some had also SaSS mixed in, some had TypeScript, and some Flow.

  • tsdx

    Zero-config CLI for TypeScript package development

    Being as JavaScript is dead and TypeScript is the successor (I kid of course! 😉), I wanted to find a way to easily start a repo without fidgeting around with configs too much. That is when I found Jared Plamer's project TSDX.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Tailwind CSS

  • PostCSS

    Transforming styles with JS plugins

    If you are unfamiliar with PostCSS, in short, it's a tool for transforming CSS with JavaScript and allows us to use "Tomorrow's CSS today". It is a CSS preprocessor, similar to SaSS, but with some differences.

  • parcel

    The zero configuration build tool for the web. 📦🚀

    In short, it does exactly what it promises with a really low learning curve. Furthermore, something really neat that comes in the mix is the example directory, which is just a playground React App to test your code. Unlike TSDX, which uses Rollup bundler, it uses Parcel to get it running (not super important, I just find it interesting). You can import the bundled package code into there to battle-test it.

  • compiled

    A familiar and performant compile time CSS-in-JS library for React.

    I've already mentioned twin.macro, and just recently learned about Compiled CSS in JS, which apparently should work with it as well.

  • Visual Studio Code

    Visual Studio Code

    .vscode: This folder is only generated if you use VScode. As I used it in this project, it was created and has my workbench settings. I've also added recommended extensions, which you can try and use if you decide to clone this repo.

  • Bit

    A tool for composable software development.

    Something I neglected to mention earlier is that one of the shared libraries we had was using Bit and we had a collection of Bit components, which were used sparingly across applications. If you are not familiar with it, the gist is that you can build, version, and distribute components individually through their cloud. A really powerful concept of super modularity. The promises on their webpage get you excited about building something truly composable.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts