DEV Community

Discussion on: How to Build A React TS Tailwind Design System

View post
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!