Quick Start - Sailboat UI

Installation

npm install -D tailwindcss

Sailboat UI is a modern UI component library for Tailwind CSS, you just need to install Tailwind CSS and configure it. Learn how to install Tailwind CSS.

Configuration

You need to add this to your tailwind.config.js file.

// tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      // Set font family
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      // Set theme colors (Required config!)
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
      },
    },
  },
  // Add plugins
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Theme

We add two colors to the theme, primary and secondary, you can set your colors. This is a required configuration, please configure it according to your own needs.

First you net import the colors from tailwindcss/colors.

const colors = require("tailwindcss/colors");

Then you can set your colors, more colors can be found in Tailwind CSS Customizing Colors.

// Set theme colors (Required config!)
colors: {
  primary: colors.blue,
  secondary: colors.slate,
},

You can also use Tailwind CSS Color Shades Generator to produce and configure your colors.

// Set theme colors (Required config!)
colors: {
  primary: {
    50: "#e6f6ff",
    100: "#b3ebff",
    ...
  },
  secondary: {
    50: "#f4f5f7",
    100: "#e4e7eb",
    ...
  },
},

Font

We use Inter as the default font, You can easily use Google Font CDN to import Inter fonts.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />

Then you can add the Inter to the tailwind.config.js file.

// Set font family
fontFamily: {
  sans: ["Inter", ...defaultTheme.fontFamily.sans],
},

To use different fonts, simply replace the font “inter” with your preferred font.

Plugins

We use @tailwindcss/typography and @tailwindcss/forms plugins by default, you can add them to the tailwind.config.js file. It is not required, you can configure it as needed.

// Add plugins
plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],

More plugins can be found in Tailwind CSS Plugins.

JavaScript

We use a lightweight JavaScript framework Alpine.js in Dropdown, Tab, and other components, you can easily use it in your project.

<!-- Alpine.js -->
<script src="https://unpkg.com/alpinejs"></script>

<!-- tippyjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Development

Sailboat UI is an open-source project that you can contribute to on GitHub. If you appreciate the project, please consider giving it a star to show your support. Thank you.

You need Hugo to run the development server. If you have Homebrew you can do the following:

brew install hugo

Clone the repository and install the dependencies. Run the development server.

npm run dev

Open http://localhost:1313/ in your browser.

npm run dev: Run the dev server.
npm run build: Build the static site.