Basic UI components for Tailwind CSS.

  • By Sail UI
  • Last update: Jan 6, 2023
  • Comments: 9

Sail UI

npm GitHub license

A collection of basic UI components built on Tailwind CSS.


Who's this for?

Serial Users

If you're already using Tailwind and you find yourself repeatedly creating a few common component classes for every project, Sail UI is for you.

This package helps you with a few basic components, so that you can start building your prototype / draft / MVP before you get down to polishing your fully custom design.

Use .btn, .card and other classes you're familiar with to get you started and customize them later when you need to.


If you're moving away from another framework to Tailwind and you're afraid of taking the leap because you don't want to build all of those lovely components from scratch yourself, Sail UI will help you with the transition.


npm install sailui

Add sailui to your tailwind.config.js file:

module.exports = {
  // ...
  plugins: [require("sailui")],


Tailwind CSS Sail UI
v1.9.0 v0.4.0
v2.0.0 v0.5.0


Start using Sail UI component classes just like how you're used to.

<a href="/" class="btn"></a>

Customizing the primary color

Simply add a theme.colors.primary key to your tailwind.config.js and Sail UI will use it as the default color for all available components:

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: "#ff6394",

What's Included

Basic Components

These components are included:


<button class="btn">Sign Up</button>

<button class="btn btn-outline">Find Out More</button>


<div class="card">Lorem ipsum dolor sit amet...</div>


<div class="alert">
  <strong>Normal stuff!</strong> zero concerns.

<div class="alert alert-blue">
  <strong>All is clear!</strong> So far so good.

<div class="alert alert-green">
  <strong>Fantastic!</strong> You did it.

<div class="alert alert-yellow">
  <strong>Watch out!</strong> Things are going down south.

<div class="alert alert-red">
  <strong>Too late!</strong> It's hit the fan.


<span class="badge">Default</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-blue">Blue</span>

<span class="badge badge-green">Green</span>

<span class="badge badge-yellow">Yellow</span>

<span class="badge badge-red">Red</span>


<span>This is a <a href="#" class="link">link</a></span>.


Sail UI uses the forms plugin from Tailwind Labs to reset form styles.

On top of the provided reset, these classes add an additional layer of styling to form elements:

Form Input

<label class="block">
  <span class="text-gray-700">Name</span>
  <input type="text" class="form-input mt-1 block w-full" />

Form Select

<label class="block">
  <span class="text-gray-700">Pet of Choice</span>
  <select class="form-select mt-1 block w-full">

Form Radio

<div class="mt-4">
  <span class="text-gray-700">Age Group</span>
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="radio" class="form-radio" name="age-group" value="cat" />
      <span class="ml-2">Cat</span>
    <label class="inline-flex items-center ml-6">
      <input type="radio" class="form-radio" name="age-group" value="kitty" />
      <span class="ml-2">Kitty</span>

Form Checkbox

<div class="flex mt-6">
  <label class="flex items-center">
    <input type="checkbox" class="form-checkbox" />
    <span class="ml-2">I agree to your <span class="underline">terms</span></span>.

Form Textarea

<label class="block mt-6">
  <span class="text-gray-700">Notes</span>
  <textarea class="form-textarea mt-1 block w-full" rows="3" placeholder="Write something..."></textarea>


Sensible default styles are applied to headings, paragraphs, and other elements of typography. These are the covered elements:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p


The mx-auto style is automatically applied to center the default .container that comes out of the box with Tailwind.


The MIT License (MIT). Please see License File for more information.



  • 1

    Implement a `link` component


    <a href="#" class="link"></a>


    When the primary color is set to #000: image

    When the primary color is set to #ff6394: image


    The link class should:

    • Follow the primary color available on the theme object for its color and border-bottom properties.
    • Follow the same hover color as btn for its hover state. See the creation of hover color here.
    • Follow the same 200ms for its transition-duration.
  • 2

    Allow users to exclude specific Sail UI components in their `tailwind.config.js` files

    Following Tailwind's docs on exposing options, Sail UI should allow users to specify a theme.sailui.exclude key that instructs the plugin to not include specific components.

    For example, a user who prefers to use the official tailwindcss-custom-forms plugin directly, instead of using our form components, should be able to write:

    module.exports = {
      theme: {
        sailui: {
          exclude: ['forms']
      plugins: [

    The API for this feature needs more research.

  • 3

    feat: Allow users to exclude specific components

    As per TailwindCSS's documentation:

    you can use plugin.withOptions to define a plugin that can be invoked with a configuration object

    In this PR, I made Sail UI accept an array of components to be excluded from their registering by addComponents and updated the documentation with examples on how to achieve this and which components can be excluded.

  • 4

    Fix: Update usage of @tailwdincss/forms

    In version 3.0.0 of tailwindcss/forms was added a plugin option for strategy:

    and I (think I) fixed the problem I described in

  • 5

    Does this kit work with the latest (3.x) version of Tailwind CSS?


    awesome ui kit, love its simplicity, used a lot of the code as reference for building my own ui kit! Thank you! 🙏❤️ Also, please note I am very new to TailwindCSS or utility-first CSS frameworks, I am also a backend developer, so CSS in general is a PITA for me 😅.

    Anyways, I created a new Tailwind CSS project as described in their docs here. Then I added sailui, as described in your README. As per my package-lock.json, I have the following package versions:

    | Package| Version| | ----------- | ----------- | | tailwindcss | 3.0.11| | sailui | 0.6.0| | @tailwindcss/forms| 0.4.0|

    and when I run:

    $ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch # as described in tailwindcss docs

    I get:

    UnhandledPromiseRejectionWarning: TypeError: forms.handler is not a function

    in @tailwindcss/forms repository I can see there's a not stating:

    Note that @tailwindcss/forms is designed for Tailwind CSS v2.0.

  • 6

    Google Analytics Consent

    Please remove Google Analytics from the github pages there is no reason for it.

    Current laws in EU require explicit consent before data Google Analytics collects is allowed.

  • 7

    feat: #9 - Added link component to the library.

    • Added it in the components list
    • Added it in the docs
    • Added it in the

    PS: Sorry if there are a lot of files modified, my prettier in VS code just gone crazy 😅

  • 8

    Make the primary color customizable. Fix #7

    Prior to this, Sail UI used black as the default color for styling all its components. For example, the default button was colored black.

    This PR allows user to define a theme.colors.primary key on their tailwind.config.js file to change the primary color across all available Sail UI components.

    Usage example:

    module.exports = {
      // ...
      theme: {
        extend: {
          colors: {
             primary: '#ff6394'

    Before: image

    After: image

  • 9

    Package Sail UI as a Tailwind CSS plugin

    Prior to this PR, Sail UI has been made up of a few CSS files combined to form base.css and components.css, which are required to be imported into user's main CSS file.

    Here is the current usage example:

    @import "tailwindcss/base";
    @import 'sailui/base';
    @import "tailwindcss/components";
    @import 'sailui/components';
    @import "tailwindcss/utilities";

    This PR converts Sail UI into a Tailwind CSS plugin following the Tailwind team's recommended mechanics for extending Tailwind CSS.

    The new usage of Sail UI requires user to add sailui as a plugin in their tailwind.config.js file:

    module.exports = {
      // ...
      plugins: [