Skip to content

Commit c072cbc

Browse files
deviate-dv8kodiakhq[bot]amirhhashemi
authored
Update Tailwind Docs to Tailwind v4 (#1065)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
1 parent 6eef898 commit c072cbc

File tree

2 files changed

+161
-51
lines changed

2 files changed

+161
-51
lines changed

‎src/routes/guides/styling-components/tailwind-v3.mdx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: TailwindCSS v3
3+
order: 7
4+
mainNavExclude: true
5+
---
6+
7+
[Tailwind CSS v3](https://v3.tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.
8+
9+
## Installation
10+
11+
1. Install Tailwind CSS as a development dependency:
12+
13+
<TabsCodeBlocks>
14+
<div id="npm">
15+
```bash frame="none"
16+
npm i --save-dev tailwindcss@3 postcss autoprefixer
17+
```
18+
</div>
19+
20+
<div id="yarn">
21+
```bash frame="none"
22+
yarn add --dev tailwindcss@3 postcss autoprefixer
23+
```
24+
</div>
25+
26+
<div id="pnpm">
27+
```bash frame="none"
28+
pnpm add --save-dev tailwindcss@3 postcss autoprefixer
29+
```
30+
</div>
31+
32+
<div id="bun">
33+
```bash frame="none"
34+
bun add --save-dev tailwindcss@3 postcss autoprefixer
35+
```
36+
</div>
37+
</TabsCodeBlocks>
38+
39+
2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
40+
41+
<TabsCodeBlocks>
42+
<div id="npm">
43+
```bash frame="none"
44+
npx tailwindcss init -p
45+
```
46+
</div>
47+
48+
<div id="yarn">
49+
```bash frame="none"
50+
yarn dlx tailwindcss init -p
51+
```
52+
</div>
53+
54+
<div id="pnpm">
55+
```bash frame="none"
56+
pnpm dlx tailwindcss init -p
57+
```
58+
</div>
59+
60+
<div id="bun">
61+
```bash frame="none"
62+
bunx tailwindcss init -p
63+
```
64+
</div>
65+
</TabsCodeBlocks>
66+
67+
3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:
68+
69+
```js
70+
/** @type {import('tailwindcss').Config} */
71+
module.exports = {
72+
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
73+
theme: {
74+
extend: {},
75+
},
76+
plugins: [],
77+
};
78+
```
79+
80+
For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).
81+
82+
## Add Tailwind directives
83+
84+
In your `src/index.css` file, add the following Tailwind directives:
85+
86+
```css
87+
@tailwind base;
88+
@tailwind components;
89+
@tailwind utilities;
90+
```
91+
92+
These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives.
93+
94+
## Import TailwindCSS
95+
96+
Import your `index.css` file into the root `index.jsx` or `index.tsx` file:
97+
98+
```jsx
99+
import { render } from "solid-js/web"
100+
import App from "./App"
101+
import "./index.css"
102+
103+
render(() => <App />, document.getElementById('root') as HTMLElement);
104+
```
105+
106+
## Usage
107+
108+
With Tailwind CSS set up, you can now utilize its utility classes.
109+
For instance, if you previously had a `Card.css` file, you can replace or remove it:
110+
111+
```
112+
/* src/components/Card.css */
113+
/* Remove or replace these styles with Tailwind utility classes */
114+
```
115+
116+
Update your components to use Tailwind's utility classes:
117+
118+
```jsx
119+
/* src/components/Card.jsx */
120+
function Card() {
121+
return (
122+
<div class="grid place-items-center min-h-screen">
123+
<div class="h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]">
124+
Hello, world!
125+
</div>
126+
</div>
127+
);
128+
}
129+
```
130+
131+
## Support
132+
133+
For additional assistance, refer to the [Tailwind CSS/Vite integration guide](https://tailwindcss.com/docs/guides/vite).

‎src/routes/guides/styling-components/tailwind.mdx‎

Lines changed: 28 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,71 @@ order: 5
44
mainNavExclude: true
55
---
66

7-
[Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.
7+
<Callout type="info" title="Note">
8+
9+
This guide is for TailwindCSS v4. For **Tailwind CSS v3** refer to [TailwindCSS v3](/guides/styling-components/tailwind-v3).
10+
11+
</Callout>
12+
13+
[Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.
814

915
## Installation
1016

1117
1. Install Tailwind CSS as a development dependency:
1218

1319
<TabsCodeBlocks>
1420
<div id="npm">
15-
```bash frame="none"
16-
npm i --save-dev tailwindcss postcss autoprefixer
17-
```
18-
</div>
1921

20-
<div id="yarn">
2122
```bash frame="none"
22-
yarn add --dev tailwindcss postcss autoprefixer
23+
npm i --save-dev tailwindcss @tailwindcss/postcss postcss
2324
```
24-
</div>
2525

26-
<div id="pnpm">
27-
```bash frame="none"
28-
pnpm add --save-dev tailwindcss postcss autoprefixer
29-
```
3026
</div>
27+
<div id="yarn">
3128

32-
<div id="bun">
3329
```bash frame="none"
34-
bun add --save-dev tailwindcss postcss autoprefixer
30+
yarn add --dev tailwindcss @tailwindcss/postcss postcss
3531
```
36-
</div>
37-
</TabsCodeBlocks>
3832

39-
2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
40-
41-
<TabsCodeBlocks>
42-
<div id="npm">
43-
```bash frame="none"
44-
npx tailwindcss init -p
45-
```
4633
</div>
34+
<div id="pnpm">
4735

48-
<div id="yarn">
4936
```bash frame="none"
50-
yarn dlx tailwindcss init -p
37+
pnpm add --save-dev tailwindcss @tailwindcss/postcss postcss
5138
```
52-
</div>
5339

54-
<div id="pnpm">
55-
```bash frame="none"
56-
pnpm dlx tailwindcss init -p
57-
```
5840
</div>
59-
6041
<div id="bun">
42+
6143
```bash frame="none"
62-
bunx tailwindcss init -p
44+
bun add --save-dev tailwindcss @tailwindcss/postcss postcss
6345
```
46+
6447
</div>
6548
</TabsCodeBlocks>
6649

67-
3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:
68-
69-
```js
70-
/** @type {import('tailwindcss').Config} */
71-
module.exports = {
72-
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
73-
theme: {
74-
extend: {},
75-
},
76-
plugins: [],
77-
};
50+
2. Add `@tailwind/postcss` to the `plugins` in your PostCSS configuration. If you do not have a PostCSS configuration file, create a new one called `postcss.config.mjs`.
51+
52+
```js title="postcss.config.mjs"
53+
export default {
54+
plugins: {
55+
"@tailwindcss/postcss": {},
56+
}
57+
}
7858
```
7959

8060
For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).
8161

82-
## Add Tailwind directives
62+
## Import TailwindCSS
8363

84-
In your `src/index.css` file, add the following Tailwind directives:
64+
Add an `@import` to your `src/index.css` file that imports Tailwind CSS.
8565

86-
```css
87-
@tailwind base;
88-
@tailwind components;
89-
@tailwind utilities;
66+
```css title="src/index.css"
67+
@import "tailwindcss";
9068
```
9169

92-
These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives.
9370

94-
## Import TailwindCSS
71+
## Import your CSS file
9572

9673
Import your `index.css` file into the root `index.jsx` or `index.tsx` file:
9774

0 commit comments

Comments
 (0)