loading...
Cover image for 8 Tailwind CSS resources to help your next project takeoff

8 Tailwind CSS resources to help your next project takeoff

andrewmcodes profile image Andrew Mason ・1 min read

Let's face it, no matter whether its our first or hundredth time, staring at a blank Tailwind CSS is intimidating. The enormity of the task at hand starts to crash over you as the excitement begins to build. Here are eight resources that I reach for first when I need to move quickly or want inspiration that may prove helpful to you.

At the end of list I will let you know which of the following I add to every Tailwind CSS project, NO MATTER WHAT!

Theme Components

GitHub logo praveenjuge / 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.

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.

Installation

npm install kutty --save
Enter fullscreen mode Exit fullscreen mode

This plugin requires Tailwind CSS 1.9 or later. 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.js
plugins: [require("kutty")],
Enter fullscreen mode Exit fullscreen mode

For JS

We bundle AlpineJS v2.6.0 for reactivity in our components. Learn more about AlpineJS here. Place the following script tag before the closing body tag.

<!-- All components in one -->
<script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
<!-- Single component -->
<!-- Include AlpineJS first -->
<script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/alpinejs.min.js"></script>
<!-- And then the single component -->
<script src="
Enter fullscreen mode Exit fullscreen mode

GitHub logo estevanmaito / windmill-dashboard

📊 A multi theme, completely accessible, ready for production dashboard.

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…

Text & Typography Components

GitHub logo jhta / tailwindcss-truncate-multiline

Tailwind CSS plugin to generate truncate multiline utilities

Truncate Multiline Plugin for Tailwind CSS

Installation

npm install tailwindcss-truncate-multiline --save
Enter fullscreen mode Exit fullscreen mode

or

yarn add tailwindcss-truncate-multiline 
Enter fullscreen mode Exit fullscreen mode

Usage

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

This plugin generates the following utilities:

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

Variants:

You can also add variants:

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




Tailwind CSS Typography

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>
Enter fullscreen mode Exit fullscreen mode

Installation

Install the plugin from npm:

# Using npm
npm install @tailwindcss/typography
# Using Yarn
yarn add @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
Enter fullscreen mode Exit fullscreen mode

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/typography@0.2.x/dist/typography.min.css"
/&gt
<!-- From jsDelivr -->
<link
  rel="
Enter fullscreen mode Exit fullscreen mode

Layout Components

GitHub logo tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.

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

Screenshot

Install

  1. Install the plugin:
# Using npm
npm install @tailwindcss/custom-forms --save-dev
# Using Yarn
yarn add @tailwindcss/custom-forms -D
Enter fullscreen mode Exit fullscreen mode
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms')
  ]
}
Enter fullscreen mode Exit fullscreen mode

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-forms
    cd tailwindcss-custom-forms
    Enter fullscreen mode Exit fullscreen mode
  2. Install the dependencies:

    # Using npm
    npm install
    # Using Yarn
    yarn
    Enter fullscreen mode Exit fullscreen mode
  3. Start the development server:

    Enter fullscreen mode Exit fullscreen mode

GitHub logo Log1x / tailwindcss-container-sizes

Simple Tailwind plugin to generate container sizes

Tailwind CSS Container Sizes Plugin

Package Version Package Total Downloads

Requirements

Installation

Install via Yarn:

$ yarn add tailwindcss-container-sizes
Enter fullscreen mode Exit fullscreen mode

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')(),
  ],
}
Enter fullscreen mode Exit fullscreen mode

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;
  
Enter fullscreen mode Exit fullscreen mode

Bonus: Developer XP

GitHub logo rogden / tailwind-config-viewer

A local UI tool for visualizing your Tailwind CSS configuration file.

Tailwind Config Viewer

Screenshot of UI

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"
}
Enter fullscreen mode Exit fullscreen mode

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

Option Default Description
-p,

GitHub logo jorenvanhee / tailwindcss-debug-screens

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

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
Enter fullscreen mode Exit fullscreen mode
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  //...
  plugins: [
    require('tailwindcss-debug-screens'),
  ]
}
Enter fullscreen mode Exit fullscreen mode

Usage

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

<body class="debug-screens">
Enter fullscreen mode Exit fullscreen mode

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' : '' }}">
Enter fullscreen mode Exit fullscreen mode

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.js
module
Enter fullscreen mode Exit fullscreen mode

Out of all of these great resources, I find Tailwind Debug Screens to be the most helpful, most of the time. In addition to the time you will save by using the plugin, it will also help you create better responsive designs and become more familiar with sizing in Tailwind by sight.

Happy coding!

Discussion

pic
Editor guide
Collapse
ivanbtrujillo profile image
ɪᴠᴀɴ

I would like to add TailBlocks to the list:
mertjf.github.io/tailblocks/

Collapse
andrewmcodes profile image
Andrew Mason Author

I love TailBlocks, I didn’t add it just bc I wanted to highlight ones people may have not heard of before but TailBlocks is on my larger resource list.

Collapse
mimisk13 profile image
Mimis K

Awesome!

Thnx!

Collapse
andrewbaisden profile image
Andrew Baisden

Cool resource how often do you use other CSS frameworks like Bootstrap. Or are you a Tailwind exclusive?

Collapse
andrewmcodes profile image
Andrew Mason Author

For my personal stuff I am Tailwind exclusive but I have used many other frameworks at various jobs. Bootstrap is probably the one I have most experience with.