{"id":13480183,"url":"https://github.com/gvital3230/tailwindcss-tooltip-arrow-after","last_synced_at":"2025-04-22T22:44:25.653Z","repository":{"id":65514236,"uuid":"253256261","full_name":"gvital3230/tailwindcss-tooltip-arrow-after","owner":"gvital3230","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-11T07:12:06.000Z","size":22,"stargazers_count":49,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T10:21:03.114Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"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/gvital3230.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":"2020-04-05T14:38:02.000Z","updated_at":"2025-01-22T21:03:03.000Z","dependencies_parsed_at":"2023-01-26T21:01:23.312Z","dependency_job_id":null,"html_url":"https://github.com/gvital3230/tailwindcss-tooltip-arrow-after","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvital3230%2Ftailwindcss-tooltip-arrow-after","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvital3230%2Ftailwindcss-tooltip-arrow-after/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvital3230%2Ftailwindcss-tooltip-arrow-after/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvital3230%2Ftailwindcss-tooltip-arrow-after/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gvital3230","download_url":"https://codeload.github.com/gvital3230/tailwindcss-tooltip-arrow-after/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250337848,"owners_count":21414099,"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":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:35.469Z","updated_at":"2025-04-22T22:44:25.624Z","avatar_url":"https://github.com/gvital3230.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":[],"readme":"# Tailwind Plugin generating triangle arrows for tooltip-ish divs\n\n## Description\n\nThis plugin generates styles for CSS based triangle arrows with configurable border and background via `::after` pseudo-elements.\n\n![example](./img/arrows-example.png)\n\n## Installation\n\nAdd this plugin to your project:\n\n```bash\n# Install via npm\nnpm install --save-dev tailwindcss-tooltip-arrow-after\n```\n\n## Usage\n\nThe plugin configuration accepts multiple objects where each key defines a class suffix for a arrow name. This options \nshould be defined in 'theme.tooltipArrows' key in tailwind.config.js\n\n```js\nmodule.exports = {\n    //...    \n    theme: {\n        tooltipArrows: theme =\u003e ({\n            'danger-arrow': {\n                borderColor: theme('colors.red.400'),\n                borderWidth: 1,\n                backgroundColor: theme('colors.red.200'),\n                size: 10,\n                offset: 10\n            },\n        }),\n    }\n//...\n}\n```\n\n- `borderColor`: border color\n- `borderWidth`: border width (in pixels) e.g. `1` \n- `backgroundColor`: background color \n- `size`: size (in pixels) \n- `offset`: offset (from left to right for top and bottom arrows and from top to bottom for left and right ones) \n\nHere is the example for adding it to your project plugins\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    require('tailwindcss-tooltip-arrow-after')()\n  ],\n}\n```\n\nThis configuration would generate classes for all four direction variants of arrows:\n- `danger-arrow-top`\n- `danger-arrow-right`\n- `danger-arrow-bottom`\n- `danger-arrow-left`\n\nExample for `danger-error-top` styles:\n\n```css\n.danger-arrow-top {\n    position: relative;\n}\n\n.danger-arrow-top:before, .danger-arrow-top:after {\n    content: \"\";\n    position: absolute;\n    left: 10px;\n    top: -20px;\n    border-top: 10px solid transparent;\n    border-right: 10px solid transparent;\n    border-bottom: 10px solid #fc8181;\n    border-left: 10px solid transparent;\n}\n\n.danger-arrow-top:after {\n  border-bottom: 10px solid #fed7d7;\n  top: -19px;\n}\n```\n\nYou can use it in your html\n\n```html\n   \u003cdiv class=\"danger-arrow-top bg-red-200 p-5 m-5 border-red-400 border border-solid rounded text-center align-content-center\"\u003e\n        TOP ARROW\n    \u003c/div\u003e\n    \u003cdiv class=\"danger-arrow-right bg-red-200 p-5 m-5 border-red-400 border border-solid rounded text-center align-content-center\"\u003e\n        RIGHT ARROW\n    \u003c/div\u003e\n    \u003cdiv class=\"danger-arrow-bottom bg-red-200 p-5 m-5 border-red-400 border border-solid rounded text-center align-content-center\"\u003e\n        BOTTOM ARROW\n    \u003c/div\u003e\n    \u003cdiv class=\"danger-arrow-left bg-red-200 p-5 m-5 border-red-400 border border-solid rounded text-center align-content-center\"\u003e\n        LEFT ARROW\n    \u003c/div\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvital3230%2Ftailwindcss-tooltip-arrow-after","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgvital3230%2Ftailwindcss-tooltip-arrow-after","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvital3230%2Ftailwindcss-tooltip-arrow-after/lists"}