5 Tailwind CSS Plugins on Github

April 1, 2021, 6:14 p.m.
Tailwind · 7 min read
5 Tailwind CSS Plugins on Github

Tailwind CSS is a utility-first CSS framework that was created by Adam Wathan. It provides a set of tools to accelerate your development process and maintain consistency in your CSS. In this article, we are going to go over 5 Tailwind CSS plugins on Github so you can get more out of the framework.

Let me know what you think about this list and if there are any plugins that you'd like to see on the list. If you have any Tailwind CSS plugins that you use that are not on the list, then feel free to let me know about them in the comments!

 

Tailwind CSS Card Plugin

Latest Release -1.0.0

Tailwind CSS Cards Plugin

This plugin provides access to pre-build Tailwind card components modeled off a stacked card example in the documentation.

 

Installation

Command Line

# With NPM
npm install @nathanheffley/tailwindcss-card --save-dev

# With Yarn
yarn add @nathanheffley/tailwindcss-card --dev

Install the plugin with NPM or Yarn.

 

Usage

Update the Tailwind config file

// tailwind.config.js
module.exports = {
  plugins: [
    require('@nathanheffley/tailwindcss-card'),
  ],
}

Add the Tailwind plugin in the tailwind.config.js file. 

 

Call the three components in the HTML

<div class="card">
  <img class="card-image" src="https://example.com/example.jpg">
  <div class="card-content">
    <!-- Card Content -->
  </div>
</div>

There are three class attribute values to create the card component: card, card-image, and card-content

 

Customize in the Tailwind config file

// tailwind.config.js
module.exports = {
  theme: {
    card: theme => ({
      maxWidth: '24rem',
      borderRadius: '.25rem',
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      padding: '1rem 1.5rem',
    })
  },
  plugins: [
    require('@nathanheffley/tailwindcss-card'),
  ],
}

Customize the theming in the tailwind.config.js file. 

 

For more information: 

https://github.com/NathanHeffley/tailwindcss-card

 

 

Tailwind CSS Tables Plugin

Latest Version- 0.4.0

Tailwind CSS Tables Plugin

Generate Bootstrap styled tables for Tailwind CSS using this plugin. All of the Bootstrap tables in their official documentation are options.

 

Installation

Command Line

# With NPM
npm install tailwindcss-tables --save

# With Yarn
yarn add tailwindcss-tables

# Manually
# Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.

Install the plugin with NPM or Yarn.

 

Usage

Update the Tailwind config file

// tailwind.config.js
module.exports = {
  plugins: [
  // Other plugins...
  require('tailwindcss-tables')(),

  // If pulled in manually...
  require('./plugins/tailwindcss-tables')(),
  ],
}

Add the Tailwind tables plugin in the tailwind.config.js file. 

 

Add the Bootstrap table in the HTML

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Use the Bootstrap table in the HTML but feel free to use the Tailwind utilities to customize. 

 

Customize in the Tailwind config file

// tailwind.config.js
module.exports = {
  plugins: [
  // Other plugins...
  require('tailwindcss-tables')({
    cellPadding: '.75rem',  // default: .75rem
    tableBorderColor: '#dee2e6',  // default: #dee2e6
    tableStripedBackgroundColor: 'rgba(0,0,0,.05)',  // default: rgba(0,0,0,.05)
    tableHoverBackgroundColor: 'rgba(0,0,0,.075)',  // default: rgba(0,0,0,.075)
    tableBodyBorder: true, // default: true. If set to false, borders for the table body will be removed. Only works for normal tables (i.e. does not apply to .table-bordered)
    verticalAlign: 'top', // default: 'top'
  }),
  ],
}

Add more theming in the tailwind.config.js file. 

 

For more information: 

https://github.com/drehimself/tailwindcss-tables 

 

 

Tailwind CSS Responsive Embed

Latest Release - 1.0.0

Tailwind CSS Responsive embed plugin

Next up are responsive embed components. Like the previous plugin, this plugin is based on Bootstrap. Use the two classes to instantly make your components responsive.  

 

Installation

Command Line

# Install via npm
npm install --save-dev tailwindcss-responsive-embed

npm install tailwindcss-aspect-ratio

Install the plugin and the Aspect Ratio Plugin for Tailwind CSS with NPM via the command line. 

 

Usage

Update the Tailwind config file

// tailwind.config.js
module.exports = {
    theme: {
        aspectRatio: {
            none: 0,
            square: [1, 1],
            "16/9": [16, 9],
            "4/3": [4, 3],
            "21/9": [21, 9]
        }
    },
    variants: {
        aspectRatio: ['responsive']
    },
    plugins: [
        require("tailwindcss-responsive-embed"),
        require("tailwindcss-aspect-ratio"),
    ]
}

Then add both plugins to the tailwind.config.js file in addition to the ratios. 

 

Add the Bootstrap table in the HTML

<div class="embed-responsive aspect-ratio-4/3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/J---aiyznGQ"></iframe>
</div>

Now you have access to seven class attribute values: embed-responsive, embed-responsive-item, aspect-ration-none, aspect-ratio-square, aspect-ratio-16\/9, aspect-ratio-4\/3, and aspect-ratio-21\/9.

 

For more information: 

https://github.com/drdogbot7/tailwindcss-responsive-embed

 

 

Tailwind Hero Patterns

Latest Version - 0.0.8

Tailwind CSS Background plugin

This plugin integrations Tailwind CSS and heropatterns.com to give you access to a ton of background patterns. 

 

Installation

Command Line

# Install via npm
npm install --save-dev tailwind-heropatterns

# or yarn
yarn add tailwind-heropatterns --dev

Install tailwind-heropatterns via npm or yarn.

 

Usage

Update the Tailwind config file

// tailwind.config.js
module.exports = {
    plugins: [
      require("tailwind-heropatterns")({
        // as per tailwind docs you can pass variants
        variants: [],

        // the list of patterns you want to generate a class for
        // the names must be in kebab-case
        // an empty array will generate all 87 patterns
        patterns: ["polka-dots", "signal"],

        // The foreground colors of the pattern
        colors: {
         default: "#9C92AC",
         "blue-dark": "#000044" //also works with rgb(0,0,205)
        },

        // The foreground opacity
        opacity: {
          default: "0.4",
          "100": "1.0"
        }
      });
    ]
}

There are over 80 pattern names so be sure to check out the Github repo for more information. 

 

Add the Hero Pattern in the HTML

<div class="bg-hero-signal-blue-dark">
  <!--Content-->
</div>

This is one of the class attribute values created from the tailwind.config.js settings above.

 

For more information: 

https://github.com/AndreaMinato/tailwind-heropatterns 

 

 

Tailwind CSS Gradients

Latest Version - 3.0.0

Tailwind CSS gradient plugin

Plugin to generate gradient background utilities. 

 

Installation

Command Line

npm install tailwindcss-gradients

Install the package via the command line. 

 

Usage

Update the Tailwind config file

// tailwind.config.js
module.exports = {
  theme: {
    linearGradientDirections: { // defaults to these values
      't': 'to top',
      'tr': 'to top right',
      'r': 'to right',
      'br': 'to bottom right',
      'b': 'to bottom',
      'bl': 'to bottom left',
      'l': 'to left',
      'tl': 'to top left',
    },
    linearGradientColors: { // defaults to {}
      'red': '#f00',
      'red-blue': ['#f00', '#00f'],
      'red-green-blue': ['#f00', '#0f0', '#00f'],
      'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
    },
    radialGradientShapes: { // defaults to this value
      'default': 'ellipse',
    },
    radialGradientSizes: { // defaults to this value
      'default': 'closest-side',
    },
    radialGradientPositions: { // defaults to these values
      'default': 'center',
      't': 'top',
      'tr': 'top right',
      'r': 'right',
      'br': 'bottom right',
      'b': 'bottom',
      'bl': 'bottom left',
      'l': 'left',
      'tl': 'top left',
    },
    radialGradientColors: { // defaults to {}
      'red': '#f00',
      'red-blue': ['#f00', '#00f'],
      'red-green-blue': ['#f00', '#0f0', '#00f'],
      'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
    },
    conicGradientStartingAngles: { // defaults to this value
      'default': '0',
    },
    conicGradientPositions: { // defaults to these values
      'default': 'center',
      't': 'top',
      'tr': 'top right',
      'r': 'right',
      'br': 'bottom right',
      'b': 'bottom',
      'bl': 'bottom left',
      'l': 'left',
      'tl': 'top left',
    },
    conicGradientColors: { // defaults to {}
      'red': '#f00',
      'red-blue': ['#f00', '#00f'],
      'red-green-blue': ['#f00', '#0f0', '#00f'],
      'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],
    },
    repeatingLinearGradientDirections: theme => theme('linearGradientDirections'), // defaults to this value
    repeatingLinearGradientColors: theme => theme('linearGradientColors'), // defaults to {}
    repeatingLinearGradientLengths: { // defaults to {}
      'sm': '25px',
      'md': '50px',
      'lg': '100px',
    },
    repeatingRadialGradientShapes: theme => theme('radialGradientShapes'), // defaults to this value
    repeatingRadialGradientSizes: { // defaults to this value
      'default': 'farthest-corner',
    },
    repeatingRadialGradientPositions: theme => theme('radialGradientPositions'), // defaults to this value
    repeatingRadialGradientColors: theme => theme('radialGradientColors'), // defaults to {}
    repeatingRadialGradientLengths: { // defaults to {}
      'sm': '25px',
      'md': '50px',
      'lg': '100px',
    },
    repeatingConicGradientStartingAngles: theme => theme('conicGradientStartingAngles'), // defaults to this value
    repeatingConicGradientPositions: theme => theme('conicGradientPositions'), // defaults to this value
    repeatingConicGradientColors: { // defaults to {}
      'red': '#f00',
      'red-blue': ['#f00', '#00f'],
      'red-green-blue': ['#f00', '#0f0', '#00f'],
      'starburst': ['white 0 5deg', 'blue 5deg'],
    },
    repeatingConicGradientLengths: { // defaults to {}
      'sm': '10deg',
      'md': '20deg',
      'lg': '40deg',
    },
  },
  variants: { // all the following default to ['responsive']
    backgroundImage: ['responsive'], // this is for the "bg-none" utility
    linearGradients: ['responsive'],
    radialGradients: ['responsive'],
    conicGradients: ['responsive'],
    repeatingLinearGradients: ['responsive'],
    repeatingRadialGradients: ['responsive'],
    repeatingConicGradients: ['responsive'],
  },
  plugins: [
    require('tailwindcss-gradients'),
  ],
};

Above is an advanced configuration of the plugin. 

 

Tailwind CSS Gradient Utilities

/* configurable with the "linearGradientDirections" and "linearGradientColors" theme objects */
.bg-gradient-[direction-key]-[color-key] {
  background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
}

 Here is an example of the CSS syntax needed to create the gradient. 

 

For more information: 

https://github.com/benface/tailwindcss-gradients 






Post a Comment
Join the community

0 Comments