DEV Community

Cover image for How to Build A React TS Tailwind Design System

How to Build A React TS Tailwind Design System

Yoav Ganbar on February 16, 2021

Why you would want to do it and a step-by-step guide on how. What is this❓ Another "how to" article (post)?! Yes, it is. What's in i...
Read full post
Collapse
 
sheldonfrith profile image
Sheldon Frith •

Very helpful, thank you! I was hoping I could find a way to use twin.macro with tsdx, but it looks like it can't be done right now. Rather than using the styled-components attrs like you are here, I've decided just to stick with tailwinds using classnames only. I don't feel all that boilerplate is worth it just for the option of including vanilla-css if I ever need to.

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

You're welcome Sheldon 🙂
I'm sure there is a way to get twin.macro working somehow, also, probably achievable with Twind.
I hear what you're saying about the attrs, however I do like my JSX more clean 🤷🏽‍♂️.

Collapse
 
marcosriganti profile image
Marcos Riganti • • Edited

Hi Yoav,
It's super useful the content, however I was having this issue when trying to run the yarn build
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
.../src/index.css:1:0
1: @tailwind base;
^
2: @tailwind components;
3: @tailwind utilities;

Any idea how to prevent the @ error ?
I'm currently using the tsdx + tailwind + rollup-plugin-postcss + chromatic [ just installed]

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

Hi Marcos,
Glad you liked the post!
From the looks of it, seems like postCSS is not configured properly. But this is a shot in the dark without seeing the actual code. Are you getting this from trying to run the related posts' repo or your own?

Collapse
 
marcosriganti profile image
Marcos Riganti •

I have started all over again

  1. Tsdx setup react-storybook
  2. Install tailwind
  3. Created the postcss.config.js
  4. Tailwind init
  5. Add yarn add -D rollup-plugin-postcss
  6. Added the tailwind css file to index
  7. Yarn build worked!

So im sorry for taking your time! I’m really not sure what could have be missing, likely something my tailwind config.

PS build took several minutes that was a bit unexpected
again thank you for the guide!

Thread Thread
 
hamatoyogi profile image
Yoav Ganbar •

Happy it worked out!
Go build something awesome! 🙂

Collapse
 
mapleleaf profile image
MapleLeaf •

Nice article that goes deep into the tooling/setup side of things, but I'd love to see more on best practices and methodology, like examples of designing an actual button component, what props it should use, other kinds of components, etc.

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

Thanks for the feedback!
Sounds like a good follow up post :-)
Have also a plan for a post about publishing. Now, I'm stumped by which I should do first...

Collapse
 
guru_taka profile image
ぐるたか • • Edited

Thank you for the great info! Thanks to you, the setup was easy.

I'm actually stuck on something, so let me ask you a question.

When in JIT mode of Tailwind CSS, the build does not stop, but dist folder is made perfectly.

It works fine in JIT mode of the development environment.

f you have any advice, I would appreciate it.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode 
// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './stories/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'black-base': '#384359',
        'gray-light': '#989ea9',
      },
      fontSize: {
        'section-heading': [
          '1.75rem',
          {
            letterSpacing: '0.2625rem',
          },
        ],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode 
// tsdx.config.js

const postcss = require('rollup-plugin-postcss')

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      }),
    )
    return config
  },
}
Enter fullscreen mode Exit fullscreen mode 
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
guru_taka profile image
ぐるたか •

I resolved it!

// package.json
"build": "TAILWIND_MODE=build NODE_ENV=production tsdx build",
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hamatoyogi profile image
Yoav Ganbar •

Happy you worked it out!

Collapse
 
antonofthewoods profile image
Anton Melser •

I usually hate doing this and you no doubt got many corrections on Twitter but... it's "pique someone's interest", not "peak". You occasionally hear people try and justify the use of "peak" after the error gets pointed out by saying that it is not grammatically incorrect to use "peak" and "taking someone's interest to the top" is what they actually meant... but it's still "pique".

Collapse
 
fpaghar profile image
Fatemeh Paghar •

It was a helpful article. Thanks.
Creating a React TypeScript Tailwind design system can be tricky because you need to balance Tailwind's simple style approach with the complexity of a TypeScript-based React app. It's like juggling simplicity with the need for detailed design.

Collapse
 
argonauta profile image
Riccardo Tartaglia •

Top Article! I had coded a React UI Kit based 100% on Tailwind!

Feedback are welcome 🙏
windy-docs.vercel.app/

Collapse
 
rangercoder99 profile image
RangerCoder99 • • Edited

Would love use all those things but my Next.js site with just tailwind and styled-components is already taking secs to render any page..using all those things you mention I think it would take a full min or more to render any page 😢

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

Seems like you should dig in to the problem you're having with your NextJs project @rangercoder99 .
I'd start by analysing you bundle with something like bundle analyzer.
You can check out how to set it up here: github.com/vercel/next.js/tree/can...

Collapse
 
crane101 profile image
ShaneParkerCXP •

Quick note for anyone experiencing the same issue: there appears to be a PostCSS V8 dependency introduced with rollup-plugin-postcss@4.0.1 but specifying v4.0.0 when you install sorts it out.
(Issue occurs when running tsdx build)

Collapse
 
raphaelmansuy profile image
Raphael MANSUY •

Very deep article👍

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

Thanks ☺️

Collapse
 
agomesd profile image
Alex Gomes • • Edited

Great read thanks for the very helpful article! I'm getting this typescript error from the Button component. Anyone else getting this, am I missing something?

Types of property 'className' are incompatible.
Type 'string | undefined' is not assignable to type '"tailwind classes"'