Skip to main content

Installation

Quick setup​

This brief guide will get you up-and-running with Tulsa. Following the installation, we'll walkthrough how to theme you components with Tailwind.

Prerequisites​

• npm, Yarn, or pnpm

• A React or Next.js project with Tailwind CSS configured

For more information on how to setup React + TailwindCSS, check out this resource.

Install​

npm install @tulsa/core

Configure theme​

In your tailwind.config.js file, set a color for the key tulsa and add the Tulsa components to Tailwind's content array:

// tailwind.config.js
module.exports = {
  // ...
  content: [
    // ...
    './node_modules/@tulsa/core/build/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        tulsa: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        }
      }
    }
  }
}
tip

To generate a Tailwind CSS color palette from a hex code, use this tool.

Using a default color​

You can use the default Tailwind CSS color palette. The example components use Tailwind's indigo.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  // ...
  content: [
    // ...
    './node_modules/@tulsa/core/build/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        tulsa: colors.indigo
      }
    }
  }
}