Skip to content

Commit 7f300c6

Browse files
committed
Create Tailwind CSS page
1 parent 1797ab0 commit 7f300c6

2 files changed

Lines changed: 55 additions & 0 deletions

File tree

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Tailwind CSS
2+
3+
> 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.
4+
5+
[tailwindcss.com](https://tailwindcss.com/), [docs](https://tailwindcss.com/docs), [code](https://github.com/tailwindlabs/tailwindcss)
6+
7+
## Getting started
8+
9+
### Playgrounds
10+
11+
- [Tailwind Play](https://play.tailwindcss.com/)
12+
13+
### New project
14+
15+
Install Tailwind CLI locally:
16+
17+
```bash
18+
npm install -D tailwindcss
19+
```
20+
21+
Create your tailwind.config.js file:
22+
23+
```bash
24+
npx tailwindcss init
25+
```
26+
27+
Run the CLI tool to scan your template files for classes and build your CSS:
28+
29+
```bash
30+
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
31+
```
32+
33+
### IDE
34+
35+
#### Visual Studio (VS) Code
36+
37+
Extension:
38+
39+
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
40+
41+
Additional steps:
42+
43+
- On css file, select Language Mode to Tailwind CSS
44+
45+
### Trainings
46+
47+
- LinkedIn Learning: [Tailwind CSS 3 Essential Training](https://www.linkedin.com/learning/tailwind-css-3-essential-training/)
48+
by Ray Villalobos ([slides](https://raybo.org/slides_tailwind3/#/))
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Tailwind Labs
2+
3+
[GitHub](https://github.com/tailwindlabs)
4+
5+
## Open-source components
6+
7+
* [Tailwind CSS](tailwind-css.md)

0 commit comments

Comments
 (0)