{"id":20375354,"url":"https://github.com/angkushsahu/tailwind-tricks","last_synced_at":"2026-03-19T15:32:30.136Z","repository":{"id":197595361,"uuid":"698956263","full_name":"angkushsahu/tailwind-tricks","owner":"angkushsahu","description":"This is a repository which contains a few basic to advanced tailwind tricks.","archived":false,"fork":false,"pushed_at":"2023-10-01T14:06:41.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T21:45:16.664Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angkushsahu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-01T13:54:16.000Z","updated_at":"2023-10-01T13:54:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8f8cf2d-aa0a-48fe-94cd-80379a0e34fd","html_url":"https://github.com/angkushsahu/tailwind-tricks","commit_stats":null,"previous_names":["angkushsahu/tailwind-tricks"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/angkushsahu/tailwind-tricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angkushsahu%2Ftailwind-tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angkushsahu%2Ftailwind-tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angkushsahu%2Ftailwind-tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angkushsahu%2Ftailwind-tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angkushsahu","download_url":"https://codeload.github.com/angkushsahu/tailwind-tricks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angkushsahu%2Ftailwind-tricks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30165626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T04:43:31.446Z","status":"ssl_error","status_checked_at":"2026-03-06T04:40:30.133Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-15T01:30:05.098Z","updated_at":"2026-03-06T07:32:19.267Z","avatar_url":"https://github.com/angkushsahu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Tricks to pace up development\n\n### Contents:\n1. [Peer and group](#1-Peer-and-group)\n1. [Media queries](#2-Media-queries)\n1. [Use tailwind custom classes in CSS directly](#3-Use-tailwind-custom-classes-in-CSS-directly)\n1. [Custom shadows](#4-Custom-shadows)\n1. [Importing Tailwind CSS colors inside tailwind.config.js file](#5-Importing-Tailwind-CSS-colors-inside-tailwindconfigjs-file)\n1. [Packages](#6-Packages)\n\n## 1. Peer and group\n\nGroup for parent children interaction and peer for sibling interaction.\n\nWe can also choose a name for the group and peer as shown below:\n\n**parent style**: group/name\n\n**parent style**: group-hover/name:bg-red-500\n\nThis is a *group* example, the same goes for *peer* as well\n\n## 2. Media queries\n\nFor example:\n**sm:bg-red-500** -\u003e applies a background color of bg-red-500 above sm breakpoint\n\n**sm:max-md:bg-red-500** -\u003e applies a background color of bg-red-500 between the breakpoints sm and md. (Notice that the range syntax is quite different than what we usually write)\n\n**min-[400px]:bg-red-500** -\u003e The screen size should be a minimum of 400px wide so that it can use the bg-red-500 background color\n\n## 3. Use tailwind custom classes in CSS directly\n\nYou can achieve this by using the good old **@apply** directive\n\nThere is another way of achieving this, follow the syntax below\n\n```css\n.my-custom-class {\n    color: theme(\"colors.purple.400\");\n    padding: theme(\"padding.2\") theme(\"padding.4\");\n    border-radius: theme(\"borderRadius.lg\");\n}\n```\n\n## 4. Custom shadows\n\n```html\n\u003cdiv className=\"shadow-[0_0_10px_purple]\"\u003e\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv className=\"shadow-[0_0_10px_theme(\"colors.purple.700\")]\"\u003e\u003c/div\u003e\n```\n\nInside the theme.config.js file\n\n```js\ntheme: {\n    extend: {\n        boxShadow: {\n            neon: \"0 0 5px theme(\"colors.purple.200\"), 0 0 20px theme(\"colors.purple.700\")\"\n        }\n    }\n}\n```\n```html\n\u003cdiv className=\"shadow-neon\"\u003e\u003c/div\u003e\n```\n\n## 5. Importing Tailwind CSS colors inside tailwind.config.js file\n\n```js\nconst colors = require(\"tailwindcss/colors\");\n\ntheme: {\n    extend: {\n        colors: {\n            primary: colors.violet\n        }\n    }\n}\n```\n\nDefault color\n```js\nconst colors = require(\"tailwindcss/colors\");\n\ntheme: {\n    extend: {\n        colors: {\n            primary: { ...colors.violet, DEFAULT: colors.violet[500] }\n        }\n    }\n}\n```\n\n## 6. Packages\n\nLet's say we have a neon-shadow class which applies a neon shadow to a div, however, we want the same neon version for a lot of different colors (say purple, red etc.)\n\ntailwind.config.js file:\n```js\nconst plugin = require(\"tailwindcss/plugin\");\n\nplugins: [\n    plugin(({ addUtilities, theme }) =\u003e {\n        const neonUtitlies = {};\n        const colors = theme(\"colors\");\n        for (const color in colors) {\n            if (typeof colors[color] === \"object\") {\n                const colorOne = colors[color][\"500\"];\n                const colorTwo = colors[color][\"700\"];\n                neonUtilities[`.neon-${color}`] = {\n                    boxShadow: `0 0 5px ${colorOne}, 0 0 20px ${colorTwo}`\n                }\n            }\n        }\n        addUtilities(neonUtilities);\n    })\n]\n```\n\nthe html file:\n```html\n\u003cdiv className=\"neon-purple\"\u003e\u003c/div\u003e \u003c!-- applies neon purple shadow --\u003e\n\u003c!-- OR --\u003e\n\u003cdiv className=\"neon-red\"\u003e\u003c/div\u003e \u003c!-- applies neon red shadow --\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangkushsahu%2Ftailwind-tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangkushsahu%2Ftailwind-tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangkushsahu%2Ftailwind-tricks/lists"}