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

Card components for Tailwind CSS
https://github.com/NathanHeffley/tailwindcss-card

Last synced: 13 days ago
JSON representation

Card components for Tailwind CSS

• Host: GitHub
• URL: https://github.com/NathanHeffley/tailwindcss-card
• Owner: nathanheffley
• License: mit
• Created: 2018-03-21T18:20:12.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-06-21T00:32:45.000Z (over 5 years ago)
• Last Synced: 2024-08-01T17:21:32.014Z (3 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 42
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

```js

// 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](https://tailwindcss.com/docs/examples/cards#stacked) in the official Tailwind documentation.

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

```css

.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.

```html



  

  


    

  



```


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).

```js

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

  ],

}

```