A collection of basic UI components built on Tailwind CSS.
Demo.
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 sailuiAdd 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 |
| v3.0.0 | v0.7.0 |
Start using Sail UI component classes just like how you're used to.
<ahref="/" class="btn"></a>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",},},},};These components are included:
<buttonclass="btn">Sign Up</button><buttonclass="btn btn-outline">Find Out More</button><divclass="card">Lorem ipsum dolor sit amet...</div><divclass="alert"><strong>Normal stuff!</strong> zero concerns.
</div><divclass="alert alert-blue"><strong>All is clear!</strong> So far so good.
</div><divclass="alert alert-green"><strong>Fantastic!</strong> You did it.
</div><divclass="alert alert-yellow"><strong>Watch out!</strong> Things are going down south.
</div><divclass="alert alert-red"><strong>Too late!</strong> It's hit the fan.
</div><spanclass="badge">Default</span><spanclass="badge badge-light">Light</span><spanclass="badge badge-blue">Blue</span><spanclass="badge badge-green">Green</span><spanclass="badge badge-yellow">Yellow</span><spanclass="badge badge-red">Red</span><span>This is a <ahref="#" 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:
<labelclass="block"><spanclass="text-gray-700">Name</span><inputtype="text" class="form-input mt-1 block w-full" /></label><labelclass="block"><spanclass="text-gray-700">Pet of Choice</span><selectclass="form-select mt-1 block w-full"><option>Cat</option><option>Catty</option><option>Kitty</option><option>Kat</option></select></label><divclass="mt-4"><spanclass="text-gray-700">Age Group</span><divclass="mt-2"><labelclass="inline-flex items-center"><inputtype="radio" class="form-radio" name="age-group" value="cat" /><spanclass="ml-2">Cat</span></label><labelclass="inline-flex items-center ml-6"><inputtype="radio" class="form-radio" name="age-group" value="kitty" /><spanclass="ml-2">Kitty</span></label></div></div><divclass="flex mt-6"><labelclass="flex items-center"><inputtype="checkbox" class="form-checkbox" /><spanclass="ml-2">I agree to your <spanclass="underline">terms</span></span>.
</label></div><labelclass="block mt-6"><spanclass="text-gray-700">Notes</span><textareaclass="form-textarea mt-1 block w-full" rows="3" placeholder="Write something..."></textarea></label>The mx-auto style is automatically applied to center the default .container that comes out of the box with Tailwind.
Simply pass an object with an array exclude in it to the registering of the plugin in your tailwind.config.js :
module.exports={// ...plugins: [require("sailui")({exclude: ['btn','alert']})],};List of all components that can be excluded:
alertbadgebtncardcontainerlinkform- excludescheckbox,input,radio,select,textareaand@tailwindcss/forms
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 MIT License (MIT). Please see License File for more information.