tailwindcss-card v0.1.0

Card Component Tailwind Plugin

Installation

Simply require the plugin in your project:

# With NPM
npm install tailwindcss-card --save-dev

# With Yarn
yarn add tailwindcss-card --dev

Usage

To get started using the plugin, you can simply add require it in your Tailwind config file.

plugins: [
  // Other plugins...

  require('tailwindcss-card')(),
],

You will now have access to all the card components with their default settings. These match up with the stacked example card in the official Tailwind documentation.

To maintain as light of a touch as possible, the components added are as follows:

.card
.card-image
.card-content

These classes can be used to form the basic structure of a card. As many card-image images and card-content wrappers as you want, in any order.

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

If you wish to customize the cards, you can pass any combination of the following options (shown here with their default values).

plugins: [
  // Other plugins...

  require('tailwindcss-card')({
    maxWidth: '30rem',
    borderRadius: '.25rem',
    boxShadow: '0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08)',
    padding: '1rem 1.5rem',
  }),
],