Installation

• Installation via CDN

  Perfect for beginners, the simplest installation can be done using CDN.

  Optionally, you can include a pre-built (~91.45 kB gzipped) Tailwind CSS utility classes to complement with Franken UI. These utility classes are pre-extracted from Tailwind CSS. If you find this too large, you can always switch to a proper build process.

  The following utility classes are available:

  Layout

  • Display
  • Visibility
  • Overflow
  • Position
  • Top / Right / Bottom / Left

  Flexbox and Grid

  • Flex Basis
  • Flex Direction
  • Flex Wrap
  • Flex
  • Flex Grow
  • Flex Shrink
  • Order
  • Grid Template Columns
  • Grid Column Start / End
  • Grid Template Rows
  • Grid Row Start / End
  • Grid Auto Flow
  • Grid Auto Columns
  • Grid Auto Rows
  • Gap
  • Justify Content
  • Justify Items
  • Justify Self
  • Align Content
  • Align Items
  • Align Self
  • Place Content
  • Place Items
  • Place Self

  Spacing

  • Padding
  • Margin
  • Space Between

  Sizing

  • Width
  • Min-Width
  • Max-Width
  • Height
  • Min-Height
  • Max-Height
  • Size

  Typography

  • Font Size
  • Font Style
  • Font Weight
  • Letter Spacing
  • Line Height
  • Text Align
  • Text Transform

  Borders

  • Border Radius
  • Border Width
  • Border Style

• Tailwind CSS (v3)

  Franken UI was initially designed as a Tailwind CSS plugin, which means it can be seamlessly integrated into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

  Start by installing PostCSS and the latest version of Franken UI using NPM:

  Next, run the npx franken-ui init -p command.

  This command will automatically generate and configure both tailwindcss.config.js and postcss.config.cjs for you. If you already have a Tailwind CSS or PostCSS configuration in place, the command will refuse to create a new one. This ensures that your existing configuration isn't accidentally overwritten.

  If you have trouble running the command, you can always refer to the source code and grab the right configuration you need.

Once you're done, you may now proceed adding JavaScript.