├── .gitignore
├── LICENSE
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Nathan Heffley
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind Card Plugin
 2 | 
 3 | <p>
 4 |   <a href="https://github.com/nathanheffley/tailwindcss-card/packages/12006"><img src="https://img.shields.io/badge/version-1.0.0-blue.svg" alt="Version 1.0.0"></a>
 5 |   <a href="https://github.com/nathanheffley/tailwindcss-card/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License MIT"></a>
 6 | </p>
 7 | 
 8 | ## Installation
 9 | 
10 | Simply require the plugin in your project:
11 | 
12 | ```
13 | # With NPM
14 | npm install @nathanheffley/tailwindcss-card --save-dev
15 | 
16 | # With Yarn
17 | yarn add @nathanheffley/tailwindcss-card --dev
18 | ```
19 | 
20 | ## Usage
21 | 
22 | To get started using the  plugin, you can simply add require it in your Tailwind config file.
23 | 
24 | ```js
25 | // tailwind.config.js
26 | module.exports = {
27 |   plugins: [
28 |     require('@nathanheffley/tailwindcss-card'),
29 |   ],
30 | }
31 | ```
32 | 
33 | 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.
34 | 
35 | To maintain as light of a touch as possible, the components added are as follows:
36 | 
37 | ```css
38 | .card
39 | .card-image
40 | .card-content
41 | ```
42 | 
43 | 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.
44 | 
45 | ```html
46 | <div class="card">
47 |   <img class="card-image" src="https://example.com/example.jpg">
48 |   <div class="card-content">
49 |     <!-- Card Content -->
50 |   </div>
51 | </div>
52 | ```
53 | 
54 | 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).
55 | 
56 | ```js
57 | // tailwind.config.js
58 | module.exports = {
59 |   theme: {
60 |     card: theme => ({
61 |       maxWidth: '24rem',
62 |       borderRadius: '.25rem',
63 |       boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
64 |       padding: '1rem 1.5rem',
65 |     })
66 |   },
67 |   plugins: [
68 |     require('@nathanheffley/tailwindcss-card'),
69 |   ],
70 | }
71 | ```
72 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = function({ addComponents, e, theme }) {
 2 |   const defaultTheme = {
 3 |     maxWidth: theme('maxWidth.sm', '24rem'),
 4 |     borderRadius: theme('borderRadius.default', '.25rem'),
 5 |     boxShadow: theme('boxShadow.lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'),
 6 |     padding: `${theme('padding.4', '1rem')} ${theme('padding.6', '1.5rem')}`,
 7 |   }
 8 | 
 9 |   const userTheme = theme('card', {})
10 | 
11 |   const cardTheme = {...defaultTheme, ...userTheme}
12 | 
13 |   addComponents({
14 |     '.card': {
15 |       maxWidth: cardTheme.maxWidth,
16 |       borderRadius: cardTheme.borderRadius,
17 |       boxShadow: cardTheme.boxShadow,
18 |       overflow: 'hidden',
19 |     },
20 | 
21 |     '.card-image': {
22 |       display: 'block',
23 |       width: '100%',
24 |     },
25 | 
26 |     '.card-content': {
27 |       padding: cardTheme.padding,
28 |     },
29 |   })
30 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@nathanheffley/tailwindcss-card",
 3 |   "version": "1.0.0",
 4 |   "description": "Card components for Tailwind CSS",
 5 |   "author": {
 6 |     "name": "Nathan Heffley",
 7 |     "email": "nathan@nathanheffley.com"
 8 |   },
 9 |   "license": "MIT",
10 |   "keywords": [
11 |     "card",
12 |     "plugin",
13 |     "component",
14 |     "tailwind"
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git://github.com/nathanheffley/tailwindcss-card.git"
19 |   },
20 |   "main": "index.js",
21 |   "publishConfig": {
22 |     "registry": "https://npm.pkg.github.com/"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------