https://github.com/sohanemon/dragon-news
🚀 postcss, tailwind
https://github.com/sohanemon/dragon-news
combinators css firebase-auth postcss react react-hot-toast tailwindcss
Last synced: 2 months ago
JSON representation
🚀 postcss, tailwind
- Host: GitHub
- URL: https://github.com/sohanemon/dragon-news
- Owner: sohanemon
- Created: 2022-10-21T06:39:46.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-23T16:36:40.000Z (over 3 years ago)
- Last Synced: 2025-01-15T11:52:02.223Z (over 1 year ago)
- Topics: combinators, css, firebase-auth, postcss, react, react-hot-toast, tailwindcss
- Language: JavaScript
- Homepage: https://dragon-news.vercel.app/
- Size: 1.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About Dragon News
server: https://api-dragon-news.vercel.app
# Node & Express
- `res.send()` sends a response. Works for both object and string
- `res.json()` sends a **json** response.
- use middleware as `app.use(middleware_name())`
---
# PostCSS
```css
article {
background: purple;
& .title {
/* & represents the article tag */
font-size: 6rem;
}
& li {
list-style-type: none;
}
}
```
> similar to `article .title {...} and article li {...}`
## Now using this in tailwind
- tailwind have some selector elements which are nothing but [this](./src/assets/Screenshot_2.png)
- [they are](./src/assets/Screenshot_1.png) built in **_modifiers_** in tailwind
- use custom modifier as
```css
```
> `&` represents the `li` tag
> at-rules like `@media` or `@supports` also can be inside arbitrary `[]`
- it will work as
```css
li:nth-child(3) {
text-decoration-style: underline;
}
```
- now first example in tailwind
```html
...
...
```
- though it is same as
```html
...
...
```
## Handling whitespace
When an arbitrary value needs to contain a space, use an underscore (\_) instead and Tailwind will automatically convert it to a space at build-time:
```html
```
## css selectors comparison
for `
...
| Selectors | Example | CSS | PostCSS |
| :---------------- | :--------------------------------------: | :--------------: | -------------: |
| class | `
...
| id | `
...
| pseudo class | `
| pseudo element | `
| all descendent | `
...
| direct descendent | `
...
| siblings only | `
| next sibling | `
> though many of these modifiers are prebuilt in tailwind
| Modifier | CSS |
| :---------------- | ---------------------------------------------: |
| hover | &:hover |
| focus | &:focus |
| focus-within | &:focus-within |
| focus-visible | &:focus-visible |
| active | &:active |
| visited | &:visited |
| target | &:target |
| first | &:first-child |
| last | &:last-child |
| only | &:only-child |
| odd | &:nth-child(odd) |
| even | &:nth-child(even) |
| first-of-type | &:first-of-type |
| last-of-type | &:last-of-type |
| only-of-type | &:only-of-type |
| empty | &:empty |
| disabled | &:disabled |
| enabled | &:enabled |
| checked | &:checked |
| indeterminate | &:indeterminate |
| default | &:default |
| required | &:required |
| valid | &:valid |
| invalid | &:invalid |
| in-range | &:in-range |
| out-of-range | &:out-of-range |
| placeholder-shown | &:placeholder-shown |
| autofill | &:autofill |
| read-only | &:read-only |
| before | &::before |
| after | &::after |
| first-letter | &::first-letter |
| first-line | &::first-line |
| marker | &::marker |
| selection | &::selection |
| file | &::file-selector-button |
| backdrop | &::backdrop |
| placeholder | &::placeholder |
| sm | @media (min-width: 640px) |
| md | @media (min-width: 768px) |
| lg | @media (min-width: 1024px) |
| xl | @media (min-width: 1280px) |
| 2xl | @media (min-width: 1536px) |
| min-[…] | @media (min-width: …) |
| max-sm | @media not all and (min-width: 640px) |
| max-md | @media not all and (min-width: 768px) |
| max-lg | @media not all and (min-width: 1024px) |
| max-xl | @media not all and (min-width: 1280px) |
| max-2xl | @media not all and (min-width: 1536px) |
| max-[…] | @media (max-width: …) |
| dark | @media (prefers-color-scheme: dark) |
| portrait | @media (orientation: portrait) |
| landscape | @media (orientation: landscape) |
| motion-safe | @media (prefers-reduced-motion: no-preference) |
| motion-reduce | @media (prefers-reduced-motion: reduce) |
| contrast-more | @media (prefers-contrast: more) |
| contrast-less | @media (prefers-contrast: less) |
| print | @media print |
| supports-[…] | @supports (…) |
| aria-checked | &[aria-checked=“true”] |
| aria-disabled | &[aria-disabled=“true”] |
| aria-expanded | &[aria-expanded=“true”] |
| aria-hidden | &[aria-hidden=“true”] |
| aria-pressed | &[aria-pressed=“true”] |
| aria-readonly | &[aria-readonly=“true”] |
| aria-required | &[aria-required=“true”] |
| aria-selected | &[aria-selected=“true”] |
| aria-[…] | &[aria-…] |
| data-[…] | &[data-…] |
| rtl | [dir=“rtl”] & |
| ltr | [dir=“ltr”] & |
| open | &[open] |
# Acknowledgement
- [tailwindcss](https://tailwindcss.com)
- [postcss](https://postcss.com)
# Codemon
- map through react-icons
```js
const icons = [
,
,
,
,
,
,
];
```
```js
return (
{icons.map((el) => (
{el}
{el.type.name.replace("Bs", "")}
))}
);
```
Output:
