Skip to content

Commit

Permalink
docs: direct to v3 tailwindcss docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ineshbose authored Jan 24, 2025
1 parent 18f416e commit a7c54c4
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 9 deletions.
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ When running your Nuxt project, this module will look for these files:

If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.

You can create the `tailwind.config.js` file by running the following command, as noted by [the Tailwind CSS installation guide](https://tailwindcss.com/docs/installation):
You can create the `tailwind.config.js` file by running the following command, as noted by [the Tailwind CSS installation guide](https://v3.tailwindcss.com/docs/installation):

::code-group

Expand All @@ -118,7 +118,7 @@ pnpm dlx tailwindcss init
If the above fails, you can try `npx tailwindcss-cli init`.
::

If you're going to create your own CSS file for Tailwind CSS, make sure to add the [`@tailwind`](https://tailwindcss.com/docs/functions-and-directives#tailwind) directives:
If you're going to create your own CSS file for Tailwind CSS, make sure to add the [`@tailwind`](https://v3.tailwindcss.com/docs/functions-and-directives#tailwind) directives:

```css [~/assets/css/tailwind.css]
@tailwind base;
Expand Down
2 changes: 1 addition & 1 deletion docs/content/1.getting-started/2.module-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default defineNuxtConfig({

- Default: `false`

As a solution to [referencing the configuration in JavaScript](https://tailwindcss.com/docs/configuration#referencing-in-java-script), if you need to resolve the Tailwind configuration in runtime, you can enable the `exposeConfig` option:
As a solution to [referencing the configuration in JavaScript](https://v3.tailwindcss.com/docs/configuration#referencing-in-java-script), if you need to resolve the Tailwind configuration in runtime, you can enable the `exposeConfig` option:

```ts [nuxt.config]
export default defineNuxtConfig({
Expand Down
6 changes: 3 additions & 3 deletions docs/content/2.tailwindcss/1.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ When you install the module, the default Tailwind configuration would be equival
}
```

You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and [content configuration](https://tailwindcss.com/docs/content-configuration) in Tailwind docs.
You can learn more about the [Tailwind configuration](https://v3.tailwindcss.com/docs/configuration) and [content configuration](https://v3.tailwindcss.com/docs/content-configuration) in Tailwind docs.

## Overwriting the configuration

Expand Down Expand Up @@ -94,7 +94,7 @@ module.exports = {

::

Learn more about Tailwind configuration in [the official documentation](https://tailwindcss.com/docs/configuration).
Learn more about Tailwind configuration in [the official documentation](https://v3.tailwindcss.com/docs/configuration).

### `config` option

Expand Down Expand Up @@ -212,7 +212,7 @@ It is unlikely for `level` to ever be over 4 - the usual depth of a Tailwind con
::

::callout{color="blue" icon="i-ph-info-duotone"}
Named exports for properties below [root options](https://tailwindcss.com/docs/configuration#configuration-options) are prefixed with `_` (`_colors`, `_900`, `_2xl`) to ensure safe variable names. You can use default imports to provide any identifier or rename named imports using `as`. Properties with unsafe variable names (`spacing['1.5']`, `height['1/2']`, `keyframes.ping['75%, 100%']`) do not get exported individually.
Named exports for properties below [root options](https://v3.tailwindcss.com/docs/configuration#configuration-options) are prefixed with `_` (`_colors`, `_900`, `_2xl`) to ensure safe variable names. You can use default imports to provide any identifier or rename named imports using `as`. Properties with unsafe variable names (`spacing['1.5']`, `height['1/2']`, `keyframes.ping['75%, 100%']`) do not get exported individually.
::

## Tailwind CSS version
Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.tailwindcss/2.editor-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ const variantClasses = {

## Configuration IntelliSense

Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind/postcss.mjs` that you can use by adding the following VSCode setting:
Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://v3.tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind/postcss.mjs` that you can use by adding the following VSCode setting:

::callout{color="blue" icon="i-ph-info-duotone"}
Tailwind provides the [Tailwind CSS IntelliSense](https://tailwindcss.com/docs/editor-setup#jet-brains-ides) extension for better integration with different IDEs.
Tailwind provides the [Tailwind CSS IntelliSense](https://v3.tailwindcss.com/docs/editor-setup#jet-brains-ides) extension for better integration with different IDEs.
::

```diff [.vscode/settings.json]
Expand Down
2 changes: 1 addition & 1 deletion docs/content/3.examples/2.dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ title: Dark Mode
description: Enable Dark Mode in Tailwind CSS with the help of `@nuxtjs/color-mode`
---

Read more about [Dark Mode in Tailwind CSS](https://tailwindcss.com/docs/dark-mode) and [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode).
Read more about [Dark Mode in Tailwind CSS](https://v3.tailwindcss.com/docs/dark-mode) and [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode).

:sandbox{src="docs-examples/examples/dark-mode"}

0 comments on commit a7c54c4

Please sign in to comment.