Introduction

Getting Started

Requirements

All of the components in SportyBlocks are designed for the latest version of Tailwind CSS, which is currently Tailwind CSS v3.4. To make sure that you are on the latest version of Tailwind CSS, update via npm:

npm install tailwindcss@latest

All of the examples in SportyBlocks rely on the default Tailwind CSS configuration and some custom color pallete. When an example requires any plugins or configuration changes, it will be noted in a comment at the top of the example.

If you're new to Tailwind CSS, you'll want to read the Tailwind CSS documentation as well to get the most out of SportyBlocks.

Config: Add custom colors

Tailwind CSS has increadable color pallete from the box. However, designing SportyBlocks components we used our own color pallette with our custom colors. To make them applied on your site you need to update your tailwind.config.js

// tailwind.config.js
theme: {
  // ...
  extend: {
    // ...
    colors: {
      'custom-gray': {
        100: '#F9F9F9',
        200: '#E1E1E1',
        400: '#97a2c6',
        DEFAULT: '#7B8294',
        600: '#3a4662',
        700: '#252e44',
        800: '#1f2638',
        900: '#252831',
      },
      'custom-green': {
        300: '#6FFFFD',
        DEFAULT: '#00D4CF',
        500: '#04C3A3',
      },
      'custom-yellow': {
        DEFAULT: '#FFCC00',
      },
      'custom-orange': {
        DEFAULT: '#FF5411',
      },
      'custom-red': {
        DEFAULT: '#FF2C4F',
      },
      'custom-blue': {
        DEFAULT: '#2380FF',
      },
      'team-golden': {
        primary: '#FFBA00',
        secondary: '#FF9000',
      },
      'team-emerald': {
        primary: '#00D3AF',
        secondary: '#00B394',
      },
      'team-crimson': {
        primary: '#FF2B4F',
        secondary: '#C70021',
      },
      'team-blue': {
        primary: '#285BFF',
        secondary: '#0330C1',
      },
      'team-purple': {
        primary: '#9147FF',
        secondary: '#5B26AA',
      },
      'team-green': {
        primary: '#95EC0B',
        secondary: '#67A504',
      },
      'team-aqua': {
        primary: '#00C6FF',
        secondary: '#007EA1',
      },
      'team-silver': {
        primary: '#B0B7C1',
        secondary: '#5F656F',
      },
    }
  },
},

Please check out Tailwind CSS guide for adding custom colors.

Optional: Add the Inter font family

We've used Inter font family for all of the SportyBlocks examples because it's a beautiful font for UI design and is completely open-source and free. Using a custom font is nice because it allows us to make the components look the same on all browsers and operating systems.

You can use any font you want in your own project of course, but if you'd like to use Inter, the easiest way is to first add it via the CDN:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Then add "InterVariable" to your "sans" font family in your Tailwind config:

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

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    // ...
};