nathanheffley / tailwindcss-card

Card components for Tailwind CSS

Tailwind Card Plugin

Installation

Simply require the plugin in your project:

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

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

Usage

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

// tailwind.config.js
module.exports = {
  plugins: [
    require('@nathanheffley/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. You can use as many card-image images and card-content elements within a card 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 of the following options (shown here with their default values if you haven't changed any Tailwind theme options).

// 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'),
  ],
}

tailwindcss-card's Issues

Error on build

I'm attempting to use tailwindcss-card in a vue project. I followed the installations instructions but get this error on 'npm run dev':

Module build failed: TypeError: addComponents is not a function at /Users/birchbrowning/Development/tailwindtest/node_modules/tailwindcss-card/index.js:18:5

Here's my postcssrs.js:

`var tailwindcss = require("tailwindcss")

module.exports = {
plugins: [
// to edit target browsers: use "browserslist" field in package.json
tailwindcss("tailwind.js"),
require("tailwindcss-card")(),
require("autoprefixer")
]
}`

I considered that the posscssrc.js file was not being imported correcly somewhere, but if I comment out the tailwindcss-card line, the app builds correctly, but the stacked card is not styled correctly, of course.

I'd love to make this work, as this seems like the right way to add components to tailwind. Any suggetions? Do you need any additional information? I used this template to start: https://github.com/cesaramirez/popular-layouts.