Skip to content

Commit 7c4561f

Browse files
authoredMar 13, 2023
docs: improvements
1 parent 45ef77c commit 7c4561f

File tree

2 files changed

+18
-22
lines changed

2 files changed

+18
-22
lines changed
 

‎docs/content/1.getting-started/1.setup.md

+14-17
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@
22

33
Using Tailwind CSS in your Nuxt project is only one command away ✨
44

5-
---
6-
75
## Installation
86

9-
1. Add `@nuxtjs/tailwindcss` dependency to your project:
7+
1. Install `@nuxtjs/tailwindcss` dependency to your project:
108

119
::code-group
1210

13-
```bash [Yarn]
14-
yarn add --dev @nuxtjs/tailwindcss
11+
```bash [yarn]
12+
yarn add -D @nuxtjs/tailwindcss
13+
```
14+
15+
```bash [npm]
16+
npm install -D @nuxtjs/tailwindcss
1517
```
1618

17-
```bash [NPM]
18-
npm install --save-dev @nuxtjs/tailwindcss
19+
```sh [pnpm]
20+
pnpm i -D @nuxtjs/tailwindcss
1921
```
2022

2123
::
@@ -25,27 +27,23 @@ npm install --save-dev @nuxtjs/tailwindcss
2527
::code-group
2628
```ts [nuxt.config (Nuxt 3)]
2729
export default defineNuxtConfig({
28-
modules: ['@nuxtjs/tailwindcss']
30+
modules: ['@nuxtjs/tailwindcss']
2931
})
3032
```
3133

3234
```ts [nuxt.config (Nuxt 2)]
3335
export default {
34-
modules: ['@nuxtjs/tailwindcss']
36+
buildModules: ['@nuxtjs/tailwindcss']
3537
}
3638
```
3739
::
3840

3941
::alert{type="success"}
40-
4142
That's it! You can now use Tailwind classes in your Nuxt app ✨
42-
4343
::
4444

4545
::alert{type="info"}
46-
4746
Discover your color palette based on your Tailwind config with the [Tailwind viewer](/tailwind/viewer).
48-
4947
::
5048

5149
## Tailwind Files
@@ -58,12 +56,11 @@ When running `nuxt dev`, this module will look for these files:
5856
If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
5957

6058
::alert{type="info"}
61-
6259
You can configure the paths in the [module options](/getting-started/options).
63-
6460
::
6561

6662
If you're going to create your own Tailwind CSS file, make sure to add the `@tailwind` directives for each of Tailwind’s layers.
63+
6764
```css
6865
@tailwind base;
6966
@tailwind components;
@@ -77,11 +74,11 @@ Learn more about overwriting the Tailwind configuration in the [Tailwind Config]
7774
You can customize the module's behavior by using the `tailwindcss` property in `nuxt.config`:
7875

7976
```ts [nuxt.config]
80-
export default {
77+
export default defineNuxtConfig({
8178
tailwindcss: {
8279
// Options
8380
}
84-
}
81+
})
8582
```
8683

8784
See the [module options](/getting-started/options).

‎docs/content/1.getting-started/2.options.md

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
# Options
22

3-
Configure Nuxt Tailwind easily with the `tailwindcss` property.
3+
Configure Nuxt Tailwind with the `tailwindcss` property.
44

5-
---
6-
7-
```ts [nuxt.config]
5+
```ts [nuxt.config.ts]
86
export default {
97
// Defaults options
108
tailwindcss: {
119
cssPath: '~/assets/css/tailwind.css',
1210
configPath: 'tailwind.config',
1311
exposeConfig: false,
12+
exposeLevel: 2,
1413
config: {},
15-
injectPosition: 0,
14+
injectPosition: 'first',
1615
viewer: true,
1716
}
1817
}

0 commit comments

Comments
 (0)
Please sign in to comment.