@fspo/design-system v2.0.3

Design system

Usage

Quickstart

• Use default Tailwindcss config + default Postcss config, create postcss.config.js:

module.exports = require('@fspo/design-system').postcssConfig.baseConfig

Advanced

• Install VSCode Tailwindcss extension

• Create tailwind.config.js (for VSCode intellisense purpose)

  • Use default:

  module.exports = require('@fspo/design-system').tailwindConfig.baseConfig

  • Custom config:

  module.exports = require('@fspo/design-system').tailwindConfig.generateTailwindConfig({
    // tailwind configs
  })

• Create postcss.config.js

  • With custom tailwind config file:

  module.exports = require('@fspo/design-system').postcssConfig.generatePostCSSConfig({
    newTailwindConfig: require('./tailwind.config'),
  })

  • Custom Postcss config:

  module.exports = require('@fspo/design-system').postcssConfig.generatePostCSSConfig({
    postcssConfig: {
      // ...
    },
  })

Useful links

Colors

• Tailwind colors
• AntDesign colors
• Color wheel

Plugins

• Line clamp
• Forms
  • Demo