{"id":13480259,"url":"https://github.com/NathanHeffley/tailwindcss-card","last_synced_at":"2025-03-27T10:31:18.100Z","repository":{"id":53771473,"uuid":"126222585","full_name":"nathanheffley/tailwindcss-card","owner":"nathanheffley","description":"Card components for Tailwind CSS","archived":false,"fork":false,"pushed_at":"2019-06-21T00:32:45.000Z","size":4,"stargazers_count":42,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-08-01T17:21:32.014Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathanheffley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-21T18:20:12.000Z","updated_at":"2024-04-25T00:31:19.000Z","dependencies_parsed_at":"2022-09-17T00:01:20.263Z","dependency_job_id":null,"html_url":"https://github.com/nathanheffley/tailwindcss-card","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanheffley%2Ftailwindcss-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanheffley%2Ftailwindcss-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanheffley%2Ftailwindcss-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanheffley%2Ftailwindcss-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanheffley","download_url":"https://codeload.github.com/nathanheffley/tailwindcss-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222230729,"owners_count":16952695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:36.406Z","updated_at":"2024-10-30T13:31:17.843Z","avatar_url":"https://github.com/nathanheffley.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Tailwind Card Plugin\n\n\u003cp\u003e\n  \u003ca href=\"https://github.com/nathanheffley/tailwindcss-card/packages/12006\"\u003e\u003cimg src=\"https://img.shields.io/badge/version-1.0.0-blue.svg\" alt=\"Version 1.0.0\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/nathanheffley/tailwindcss-card/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License MIT\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nSimply require the plugin in your project:\n\n```\n# With NPM\nnpm install @nathanheffley/tailwindcss-card --save-dev\n\n# With Yarn\nyarn add @nathanheffley/tailwindcss-card --dev\n```\n\n## Usage\n\nTo get started using the  plugin, you can simply add require it in your Tailwind config file.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require('@nathanheffley/tailwindcss-card'),\n  ],\n}\n```\n\nYou 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.\n\nTo maintain as light of a touch as possible, the components added are as follows:\n\n```css\n.card\n.card-image\n.card-content\n```\n\nThese 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.\n\n```html\n\u003cdiv class=\"card\"\u003e\n  \u003cimg class=\"card-image\" src=\"https://example.com/example.jpg\"\u003e\n  \u003cdiv class=\"card-content\"\u003e\n    \u003c!-- Card Content --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf 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).\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    card: theme =\u003e ({\n      maxWidth: '24rem',\n      borderRadius: '.25rem',\n      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n      padding: '1rem 1.5rem',\n    })\n  },\n  plugins: [\n    require('@nathanheffley/tailwindcss-card'),\n  ],\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanHeffley%2Ftailwindcss-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNathanHeffley%2Ftailwindcss-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanHeffley%2Ftailwindcss-card/lists"}