gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add tailwind CSS content

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-08 19:27:26 +01:00
parent d09c91247e
commit 9b29d240e3
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
View File

@ -1,14 +1,10 @@
# Tailwind css # Tailwind CSS
### Rapidly build modern websites without ever leaving your HTML. CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
##### A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
<ResourceGroupTitle>Free Content</ResourceGroupTitle> <ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink badgeText='Read' href='https://tailwindcss.com/'>Tailwind Website</BadgeLink> <BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction <BadgeLink colorScheme='blue' badgeText='YouTube Channel' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
</BadgeLink> <BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course <BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
</BadgeLink> <BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?
</BadgeLink>

8
pages/_app.tsx
View File

@ -26,6 +26,14 @@ const GlobalStyles = css`
text-rendering: optimizeSpeed; text-rendering: optimizeSpeed;
} }
code {
background: #1e1e3f;
color: #9efeff;
padding: 3px 5px;
font-size: 14px;
border-radius: 3px;
}
svg .clickable-group { svg .clickable-group {
cursor: pointer; cursor: pointer;