Syntax

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

Appearance

When the primary color is set to #000:

When the primary color is set to #ff6394:

Notes

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.

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: [
    require('sailui'),
  ],
}

The API for this feature needs more research.

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.

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

https://github.com/tailwindlabs/tailwindcss-forms/blob/master/CHANGELOG.md#030---2021-03-25

and I (think I) fixed the problem I described in https://github.com/sailui/ui/issues/17

Hi,

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.

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.

• Added it in the components list
• Added it in the docs
• Added it in the README.md

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

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:

After:

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: [
    require('sailui')(),
  ]
}