Kutty

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

This plugin requires Tailwind CSS 1.6 or later.

Installation

npm i kutty --save

Tailwind CSS is not included in this package. Learn how to install tailwind here.

Usage

For CSS

Require the installed plugin directly to your Tailwind config:

// tailwind.config.jsplugins: [require("kutty")],

For JS

Place the following script tag before the closing body tag:

<script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>

Development

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

brew install hugo

Check this Hugo installation page for installing on other systems.

Then clone the repo, install dependencies, and start the server locally.

git clone https://github.com/praveenjuge/kutty.gitcd kuttynpm inpm start

Windmill Dashboard

A multi theme, completely accessible, with components and pages examples, ready for production dashboard.

See it live

• Thoroughly accessible
• Light and dark themes
• Styled with Tailwind CSS
• Various components
• React version

Usage

Clone or download this repo and everything you need is inside the public folder.

Accessibility

This dashboard was developed with a11y in mind since the beginning.

1. Every text passes the WCAG Level AA (at least)
2. It is completely keyboard navigable
3. I actually used NVDA to read my screen during development

Everybody can benefit with good accessibility practices, like the modal, for example (test it live). It uses focus trap techniques to not loose focus when navigating via keyboard and thinking of mobile users with large screen devices, it is placed in the bottom of the screen.

Multi theme

It uses Tailwind CSS for styling, and

Truncate Multiline Plugin for Tailwind CSS

Installation

npm install tailwindcss-truncate-multiline --save

or

yarn add tailwindcss-truncate-multiline 

Usage

// tailwind.config.js{  theme: {      truncate: {          lines: {              3: '3',              5: '5',              8: '8',          }      }      plugins: [    require('tailwindcss-truncate-multiline')(),  ],}

This plugin generates the following utilities:

.truncate-[key]-lines {    'overflow': 'hidden',    'display': '-webkit-box',    '-webkit-line-clamp': [value],    '-webkit-box-orient': 'vertical',}

Variants:

You can also add variants:

//tailwind.config.js{    ...    plugins: [       require('tailwindcss-truncate-multiline')(['responsive', 'hover']),     ]}

A plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).

View live demo

<article class="prose lg:prose-xl">  {{ markdown }}</article>

Installation

Install the plugin from npm:

# Using npmnpm install @tailwindcss/typography# Using Yarnyarn add @tailwindcss/typography

Then add the plugin to your tailwind.config.js file:

// tailwind.config.jsmodule.exports = {  theme: {    // ...  },  plugins: [    require('@tailwindcss/typography'),    // ...  ],}

Using a CDN

If you need to pull in these styles via CDN, you can do so using services like UNPKG or jsDeliver:

<!-- From UNPKG --><link rel="stylesheet" href="https://unpkg.com/@tailwindcss/[email protected]/dist/typography.min.css"><!-- From jsDelivr --><link rel="

Tailwind CSS Custom Forms

Out of the box, selects, checkboxes, and radios look awful in Tailwind and the only way to make them look better is with custom CSS.

The goal of this project is to provide a better starting point for form elements that is still fairly unopinionated, and easy to customize by adding utilities instead of having to write complicated CSS rules.

Demo

Install

1. Install the plugin:

# Using npmnpm install @tailwindcss/custom-forms --save-dev# Using Yarnyarn add @tailwindcss/custom-forms -D

2. Add it to your tailwind.config.js file:

// tailwind.config.jsmodule.exports = {  // ...  plugins: [    require('@tailwindcss/custom-forms')  ]}

Documentation

The project is still early but basic documentation can be found here:

Read the documentation

Local development

1. Clone the repository:

   git clone https://github.com/tailwindcss/custom-forms.git tailwindcss-custom-formscd tailwindcss-custom-forms

2. Install the dependencies:

   # Using npmnpm install# Using Yarnyarn

3. Start the development server:

Tailwind CSS Container Sizes Plugin

Requirements

• Tailwind CSS >= v1.0.0

Installation

Install via Yarn:

$ yarn add tailwindcss-container-sizes

Usage

// tailwind.config.js{  theme: {    screens: {      sm: '640px',      md: '768px',      lg: '1024px',      xl: '1280px',    },    container: {      center: true,      padding: '1.5rem',      sizes: {}, // defaults to breakpoint (screens) sizes    },  },  plugins: [    require('tailwindcss-container-sizes')(),  ],}

This plugin generates the following utilities:

.container-sm {  max-width: 640px  margin-right: auto  margin-left: auto  padding-right: 1.5rem  padding-left: 1.5rem}.container-md {  max-width: 768px;  margin-right: auto;  margin-left: auto;  padding-right: 1.5rem;  padding-left: 1.5rem}.container-lg {  max-width: 1024px;  margin-right: auto;  

Tailwind Config Viewer

Tailwind Config Viewer is a local UI tool for visualizing your Tailwind CSS configuration file. Keep it open during development to quickly reference custom Tailwind values/classes. Easily navigate between sections of the configuration and copy class names to your clipboard by clicking on them.

Demo using the default Tailwind config

Installation

NPX

Run npx tailwind-config-viewer from within the directory that contains your Tailwind configuration file.

Globally

npm i tailwind-config-viewer -g

Locally

npm i tailwind-config-viewer -D

When installing locally, you can add an entry into the package.json scripts field to run and open the viewer:

"scripts": {  "tailwind-config-viewer": "tailwind-config-viewer -o"}

Usage

Run the tailwind-config-viewer command from within the directory that contains your Tailwind configuration file.

Commands

serve (default)

The serve command is the default command. Running tailwind-config-viewer is the same as tailwind-config-viewer serve.

Options

Tailwind CSS Debug Screens

A Tailwind CSS component that shows the currently active screen (responsive breakpoint).

Demo

Install

Requires Tailwind v1.0 or higher.

1. Install the plugin:

npm install tailwindcss-debug-screens --save-dev

2. Add it to your tailwind.config.js file:

// tailwind.config.jsmodule.exports = {  //...  plugins: [    require('tailwindcss-debug-screens'),  ]}

Usage

Add the class debug-screens to your <body> tag.

<body class="debug-screens">

Make sure the class is only present during development. Here's an example of how you could do that in Craft CMS:

<body class="{{ devMode ? 'debug-screens' : '' }}">

Customization

You can customize this plugin in the theme.debugScreens section of your tailwind.config.js file.

Ignore screens

To ignore a specific screen (for instance if you use dark mode), add the screen name to the ignore configuration array.

// tailwind.config.jsmodule