{"id":20401019,"url":"https://github.com/sohanemon/dragon-news","last_synced_at":"2026-04-04T08:37:52.583Z","repository":{"id":61928819,"uuid":"555215386","full_name":"sohanemon/dragon-news","owner":"sohanemon","description":"🚀 postcss, tailwind","archived":false,"fork":false,"pushed_at":"2022-10-23T16:36:40.000Z","size":1259,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T11:52:02.223Z","etag":null,"topics":["combinators","css","firebase-auth","postcss","react","react-hot-toast","tailwindcss"],"latest_commit_sha":null,"homepage":"https://dragon-news.vercel.app/","language":"JavaScript","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/sohanemon.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}},"created_at":"2022-10-21T06:39:46.000Z","updated_at":"2022-12-30T14:53:37.000Z","dependencies_parsed_at":"2022-10-23T18:00:28.286Z","dependency_job_id":null,"html_url":"https://github.com/sohanemon/dragon-news","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/sohanemon%2Fdragon-news","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fdragon-news/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fdragon-news/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fdragon-news/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohanemon","download_url":"https://codeload.github.com/sohanemon/dragon-news/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241950081,"owners_count":20047587,"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":["combinators","css","firebase-auth","postcss","react","react-hot-toast","tailwindcss"],"created_at":"2024-11-15T04:47:33.794Z","updated_at":"2025-12-30T19:16:23.026Z","avatar_url":"https://github.com/sohanemon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About Dragon News\nserver: https://api-dragon-news.vercel.app\n\n# Node \u0026 Express\n\n- `res.send()` sends a response. Works for both object and string\n- `res.json()` sends a **json** response.\n- use middleware as `app.use(middleware_name())`\n\n---\n\n# PostCSS\n\n```css\narticle {\n  background: purple;\n\n  \u0026 .title {\n    /* \u0026 represents the article tag */\n    font-size: 6rem;\n  }\n\n  \u0026 li {\n    list-style-type: none;\n  }\n}\n```\n\n\u003e similar to `article .title {...} and article li {...}`\n\n## Now using this in tailwind\n\n- tailwind have some selector elements which are nothing but [this](./src/assets/Screenshot_2.png)\n- [they are](./src/assets/Screenshot_1.png) built in **_modifiers_** in tailwind\n- use custom modifier as\n\n```css\n \u003cli class=\"[\u0026:nth-child(3)]:underline\"\u003e{item}\u003c/li\u003e\n```\n\n\u003e `\u0026` represents the `li` tag\n\n\u003e at-rules like `@media` or `@supports` also can be inside arbitrary `[]`\n\n- it will work as\n\n```css\nli:nth-child(3) {\n  text-decoration-style: underline;\n}\n```\n\n- now first example in tailwind\n\n```html\n\u003carticle className=\"bg-purple-400 [\u0026.title]:text-8xl [\u0026_li]:list-none\"\u003e\n  ...\n  \u003cp className=\"title\"\u003e...\u003c/p\u003e\n  \u003cli\u003e...\u003c/li\u003e\n  \u003cli\u003e...\u003c/li\u003e\n  \u003cli\u003e...\u003c/li\u003e\n\u003c/article\u003e\n```\n\n- though it is same as\n\n```html\n\u003carticle className=\"bg-purple-400\"\u003e\n  ...\n  \u003cp className=\"text-8xl\"\u003e...\u003c/p\u003e\n  \u003cli className=\"list-none\"\u003e...\u003c/li\u003e\n  \u003cli className=\"list-none\"\u003e...\u003c/li\u003e\n  \u003cli className=\"list-none\"\u003e...\u003c/li\u003e\n\u003c/article\u003e\n```\n\n## Handling whitespace\n\nWhen an arbitrary value needs to contain a space, use an underscore (\\_) instead and Tailwind will automatically convert it to a space at build-time:\n\n```html\n\u003cdiv class=\"grid grid-cols-[1fr_500px_2fr]\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n## css selectors comparison\n\nfor `\u003cdiv\u003e\u003cp\u003e...\u003c/p\u003e\u003c/div\u003e`\n\n| Selectors         |                 Example                  |       CSS        |        PostCSS |\n| :---------------- | :--------------------------------------: | :--------------: | -------------: |\n| class             | `\u003cdiv\u003e\u003cp className='name'\u003e...\u003c/p\u003e\u003c/div\u003e` |    div .name     |         \u0026.name |\n| id                |    `\u003cdiv\u003e\u003cp id='name'\u003e...\u003c/p\u003e\u003c/div\u003e`     |    div #name     |         \u0026#name |\n| pseudo class      |             `\u003cdiv\u003e...\u003c/div\u003e`             |    div:hover     |        \u0026:hover |\n| pseudo element    |             `\u003cdiv\u003e...\u003c/div\u003e`             | div::first-child | \u0026::first-child |\n| all descendent    |         `\u003cdiv\u003e\u003cp\u003e...\u003c/p\u003e\u003c/div\u003e`          |     div name     |        \u0026\\_name |\n| direct descendent |         `\u003cdiv\u003e\u003cp\u003e...\u003c/p\u003e\u003c/div\u003e`          |     div\u003ename     |         \u0026\u003ename |\n| siblings only     |      `\u003cdiv\u003e...\u003c/div\u003e\u003cdiv\u003e...\u003c/div\u003e`      |     div~name     |         \u0026~name |\n| next sibling      |      `\u003cdiv\u003e...\u003c/div\u003e\u003cdiv\u003e...\u003c/div\u003e`      |     div+name     |         \u0026+name |\n\n\u003e though many of these modifiers are prebuilt in tailwind\n\n| Modifier          |                                            CSS |\n| :---------------- | ---------------------------------------------: |\n| hover             |                                        \u0026:hover |\n| focus             |                                        \u0026:focus |\n| focus-within      |                                 \u0026:focus-within |\n| focus-visible     |                                \u0026:focus-visible |\n| active            |                                       \u0026:active |\n| visited           |                                      \u0026:visited |\n| target            |                                       \u0026:target |\n| first             |                                  \u0026:first-child |\n| last              |                                   \u0026:last-child |\n| only              |                                   \u0026:only-child |\n| odd               |                               \u0026:nth-child(odd) |\n| even              |                              \u0026:nth-child(even) |\n| first-of-type     |                                \u0026:first-of-type |\n| last-of-type      |                                 \u0026:last-of-type |\n| only-of-type      |                                 \u0026:only-of-type |\n| empty             |                                        \u0026:empty |\n| disabled          |                                     \u0026:disabled |\n| enabled           |                                      \u0026:enabled |\n| checked           |                                      \u0026:checked |\n| indeterminate     |                                \u0026:indeterminate |\n| default           |                                      \u0026:default |\n| required          |                                     \u0026:required |\n| valid             |                                        \u0026:valid |\n| invalid           |                                      \u0026:invalid |\n| in-range          |                                     \u0026:in-range |\n| out-of-range      |                                 \u0026:out-of-range |\n| placeholder-shown |                            \u0026:placeholder-shown |\n| autofill          |                                     \u0026:autofill |\n| read-only         |                                    \u0026:read-only |\n| before            |                                      \u0026::before |\n| after             |                                       \u0026::after |\n| first-letter      |                                \u0026::first-letter |\n| first-line        |                                  \u0026::first-line |\n| marker            |                                      \u0026::marker |\n| selection         |                                   \u0026::selection |\n| file              |                        \u0026::file-selector-button |\n| backdrop          |                                    \u0026::backdrop |\n| placeholder       |                                 \u0026::placeholder |\n| sm                |                      @media (min-width: 640px) |\n| md                |                      @media (min-width: 768px) |\n| lg                |                     @media (min-width: 1024px) |\n| xl                |                     @media (min-width: 1280px) |\n| 2xl               |                     @media (min-width: 1536px) |\n| min-[…]           |                          @media (min-width: …) |\n| max-sm            |          @media not all and (min-width: 640px) |\n| max-md            |          @media not all and (min-width: 768px) |\n| max-lg            |         @media not all and (min-width: 1024px) |\n| max-xl            |         @media not all and (min-width: 1280px) |\n| max-2xl           |         @media not all and (min-width: 1536px) |\n| max-[…]           |                          @media (max-width: …) |\n| dark              |            @media (prefers-color-scheme: dark) |\n| portrait          |                 @media (orientation: portrait) |\n| landscape         |                @media (orientation: landscape) |\n| motion-safe       | @media (prefers-reduced-motion: no-preference) |\n| motion-reduce     |        @media (prefers-reduced-motion: reduce) |\n| contrast-more     |                @media (prefers-contrast: more) |\n| contrast-less     |                @media (prefers-contrast: less) |\n| print             |                                   @media print |\n| supports-[…]      |                                  @supports (…) |\n| aria-checked      |                         \u0026[aria-checked=“true”] |\n| aria-disabled     |                        \u0026[aria-disabled=“true”] |\n| aria-expanded     |                        \u0026[aria-expanded=“true”] |\n| aria-hidden       |                          \u0026[aria-hidden=“true”] |\n| aria-pressed      |                         \u0026[aria-pressed=“true”] |\n| aria-readonly     |                        \u0026[aria-readonly=“true”] |\n| aria-required     |                        \u0026[aria-required=“true”] |\n| aria-selected     |                        \u0026[aria-selected=“true”] |\n| aria-[…]          |                                      \u0026[aria-…] |\n| data-[…]          |                                      \u0026[data-…] |\n| rtl               |                                  [dir=“rtl”] \u0026 |\n| ltr               |                                  [dir=“ltr”] \u0026 |\n| open              |                                        \u0026[open] |\n\n# Acknowledgement\n\n- [tailwindcss](https://tailwindcss.com)\n\n- [postcss](https://postcss.com)\n\n# Codemon\n\n- map through react-icons\n\n```js\nconst icons = [\n  \u003cBsFacebook /\u003e,\n  \u003cBsTwitter /\u003e,\n  \u003cBsYoutube /\u003e,\n  \u003cBsReddit /\u003e,\n  \u003cBsWhatsapp /\u003e,\n  \u003cBsDiscord /\u003e,\n];\n```\n\n```js\nreturn (\n  \u003csection className='mr-3'\u003e\n    \u003cSocialButton /\u003e\n    \u003cdiv className='flex flex-col gap-1 mt-3 p-5 tracking-widest'\u003e\n      {icons.map((el) =\u003e (\n        \u003cdiv className='flex items-center gap-3 border p-2 text-2xl rounded-md cursor-pointer hover:shadow-md shadow-sm'\u003e\n          {el}\n          \u003cp className='text-base'\u003e{el.type.name.replace(\"Bs\", \"\")}\u003c/p\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  \u003c/section\u003e\n);\n```\n\nOutput:\n\n![screenshot](./client/src/assets/r.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fdragon-news","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohanemon%2Fdragon-news","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fdragon-news/lists"}