Getting started

Tailwind Integration

Componentry is designed to integrate closely with Tailwind. All componentry utility props map to Tailwind classes.

1. Use the same theme object

Componentry uses the same theme shape as Tailwind, so you can define your theme once and use it for both configs.

// tailwind.config.js
const theme = require('./src/theme/theme')

module.exports = {
  theme,
  content: ['./src/**/*.{js,jsx,ts,tsx}']
}

2. Opt out of Tailwind base styles

If you included the Componentry base styles with @componentry foundation; in your app styles you can opt out of Tailwind's similar setup styles with the preflight value.

// tailwind.config.js
const theme = require('./src/theme/theme')

module.exports = {
  theme,
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: false,
  },
}

3. Safelist utility classes

Componentry provides shorthand utility props that map to Tailwind utility classes, but Tailwind doesn't see this usage so it won't include these classes. The easiest way to work around this is to safelist the classes you'll use. Componentry provides a tailwindSafelist export that manages this for you.

// tailwind.config.js
const { tailwindSafelist } = require('componentry')
const theme = require('./src/theme/theme')

module.exports = {
  theme,
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: false,
  },
  safeList: tailwindSafelist 
}

4. Optional nesting support

If you want to support nesting in your CSS Componentry works with tailwind/nesting.

// postcss.config.js
module.exports = {
  plugins: [
    require('componentry/postcss'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}