nuxt-modules · atinux · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -0,0 +1,31 @@
+export default defineAppConfig({
+ docus: {
+ title: 'Nuxt Tailwind',
+ layout: 'default',
+ url: 'https://tailwindcss.nuxtjs.org/',
+ description: 'Add Tailwind CSS to your Nuxt application in seconds.',
+ socials: {
+ twitter: 'nuxt_js',
+ github: 'nuxt-modules/tailwindcss'
+ },
+ image: '/cover.jpg',
+ header: {
+ // title: false,
+ logo: true
+ },
+ footer: {
+ iconLinks: [
+ {
+ label: 'Nuxt',
+ href: 'https://nuxt.com',
+ icon: 'IconNuxt'
+ },
+ {
+ label: 'Vue Telescope',
+ href: 'https://vuetelescope.com',
+ icon: 'IconVueTelescope'
+ }
+ ]
+ }
+ }
+})
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
@@ -2,7 +2,7 @@
 title: Introduction
 description: Add Tailwind CSS to your Nuxt application in seconds.
 navigation: false
-layout: fluid
+layout: page
 ---
 
 ::block-hero

diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md
@@ -1,6 +1,7 @@
----
-title: Setup
-description: Using Tailwind CSS in your Nuxt project is only one command away ✨
+# Setup
+
+Using Tailwind CSS in your Nuxt project is only one command away ✨
+
 ---
 
 ## Installation

diff --git a/docs/content/1.getting-started/2.options.md b/docs/content/1.getting-started/2.options.md
@@ -1,6 +1,7 @@
----
-title: Options
-description: Configure Nuxt Tailwind easily with the `tailwindcss` property.
+# Options
+
+Configure Nuxt Tailwind easily with the `tailwindcss` property.
+
 ---
 
 ```ts [nuxt.config]

diff --git a/docs/content/2.tailwind/1.config.md b/docs/content/2.tailwind/1.config.md
@@ -1,6 +1,7 @@
----
-title: Config
-description: This module comes with a default Tailwind configuration file to provide the best possible user experience.
+# Config
+
+This module comes with a default Tailwind configuration file to provide the best possible user experience.
+
 ---
 
 ## Default configuration

diff --git a/docs/content/2.tailwind/2.viewer.md b/docs/content/2.tailwind/2.viewer.md
@@ -1,6 +1,7 @@
----
-title: Viewer
-description: Visualize your Tailwind configuration with the viewer.
+# Viewer
+
+Visualize your Tailwind configuration with the viewer.
+
 ---
 
 Nuxt Tailwind will expose a `/_tailwind/` route in development, so that you can quickly visualize your Tailwind configuration with easy copy-pasting (thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨).

diff --git a/docs/content/2.tailwind/3.editor-support.md b/docs/content/2.tailwind/3.editor-support.md
@@ -1,6 +1,7 @@
----
-title: Editor Support
-description: Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
+# Editor Support
+
+Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
+
 ---
 
 Tailwind provides an [extension for Visual Studio Code](https://github.com/tailwindlabs/tailwindcss-intellisense), which enables advanced features such as autocomplete, syntax highlighting, and linting.

diff --git a/docs/content/3.examples/1.basic.md b/docs/content/3.examples/1.basic.md
@@ -1,9 +1,13 @@
 ---
-title: Basic Usage
-description: Live example of basic usage of Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Basic Usage
+
+Live example of basic usage of Nuxt Tailwind on CodeSandbox.
+
+---
+
 Minimal example of a Nuxt project with Tailwind CSS module.
 
 :sandbox{src="https://codesandbox.io/embed/nuxt3-tailwindcss-twowfx"}
diff --git a/docs/content/3.examples/2.dark-mode.md b/docs/content/3.examples/2.dark-mode.md
@@ -1,9 +1,13 @@
 ---
-title: Dark Mode
-description: Live example of dark mode with Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Dark Mode
+
+Live example of dark mode with Nuxt Tailwind on CodeSandbox.
+
+---
+
 <!-- TODO: Replace with tailwind's native dark mode support. -->
 
 Example with the [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module) module.

diff --git a/docs/content/3.examples/3.tailwindui.md b/docs/content/3.examples/3.tailwindui.md
@@ -1,9 +1,14 @@
 ---
-title: Tailwind UI
-description: Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
 toc: false
 ---
 
+# Tailwind UI
+
+Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
+
+---
+
+
 Example with [Tailwind UI](https://tailwindui.com) plugin with the [Inter](https://rsms.me/inter/) font loaded by [@nuxtjs/google-fonts](https://github.com/nuxt-community/google-fonts-module) module.
 
 :sandbox{src="https://codesandbox.io/embed/nuxt-tailwindui-xy1jk" class="h-[600px]"}
diff --git a/docs/content/3.examples/4.postcss-plugin.md b/docs/content/3.examples/4.postcss-plugin.md
@@ -1,9 +1,13 @@
 ---
-title: PostCSS Plugins
-description: Live example of Nuxt Tailwind with postcss-color-gray plugin.
 toc: false
 ---
 
+# PostCSS Plugins
+
+Live example of Nuxt Tailwind with postcss-color-gray plugin.
+
+---
+
 <!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
 <!-- TODO: update the link to relevant Nuxt 3 documentation -->
 

diff --git a/docs/content/3.examples/5.daisyui.md b/docs/content/3.examples/5.daisyui.md
@@ -1,9 +1,13 @@
 ---
-title: DaisyUI
-description: Live example of Nuxt Tailwind with daisyUI and color mode.
 toc: false
 ---
 
+# DaisyUI
+
+Live example of Nuxt Tailwind with daisyUI and color mode.
+
+---
+
 Example with [daisyUI](https://daisyui.com/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/).
 
 Note that the preview may not work, you can open the sandbox on https://stackblitz.com/edit/nuxt-color-mode-daisyui-snrnt9?file=app.vue

diff --git a/docs/content/3.examples/6.content.md b/docs/content/3.examples/6.content.md
@@ -1,6 +1,7 @@
----
-title: '@nuxt/content'
-description: 'Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!'
+# `@nuxt/content`
+
+Discover how powerful it is to use TailwindCSS in @nuxt/content Markdown files!
+
 ---
 
 The module supports [@nuxt/content](https://content.nuxtjs.org), meaning you can use Tailwind classes inside your content files with MDC syntax!

diff --git a/docs/content/4.community/_changelog.md b/docs/content/4.community/_changelog.md
@@ -1,9 +1,17 @@
 ---
 layout: docs
 toc: false
-title: Changelog
-description: Discover the latest updates.
 ---
 
-::releases
+# Changelog
+
+Discover the latest updates.
+
+---
+
+::alert{type="warning"}
+This page is work in progress.
+
+[Visit this page](https://github.com/nuxt-modules/i18n/releases).
 ::
+
diff --git a/docs/content/_theme.yml b/docs/content/_theme.yml
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -1,27 +1,7 @@
-import { defineNuxtConfig } from 'nuxt'
-import colors from 'tailwindcss/colors.js'
-
 export default defineNuxtConfig({
- extends: ['./node_modules/@docus/docs-theme'],
- github: {
- owner: 'nuxt-community',
- repo: 'tailwindcss-module',
- branch: 'main'
- },
- theme: {},
- modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
+ extends: ['@nuxt-themes/docus'],
+ modules: ['nuxt-plausible'],
  plausible: {
  domain: 'tailwindcss.nuxtjs.org'
- },
- tailwindcss: {
- config: {
- theme: {
- extend: {
- colors: {
- primary: colors.sky
- }
- }
- }
- }
  }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -12,9 +12,8 @@
  "license": "MIT",
  "homepage": "https://tailwindcss.nuxtjs.org",
  "devDependencies": {
- "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
- "@docus/github": "npm:@docus/github-edge@latest",
- "nuxt": "^3.0.0-rc.5",
- "vue-plausible": "^1.3.1"
+ "@nuxt-themes/docus": "^1.1.3",
+ "nuxt": "^3.0.0",
+ "nuxt-plausible": "latest"
  }
 }
diff --git a/docs/tokens.config.ts b/docs/tokens.config.ts
@@ -0,0 +1,18 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+ color: {
+ primary: {
+ 50: '#f0f9ff',
+ 100: '#e0f2fe',
+ 200: '#bae6fd',
+ 300: '#7dd3fc',
+ 400: '#38bdf8',
+ 500: '#0ea5e9',
+ 600: '#0284c7',
+ 700: '#0369a1',
+ 800: '#075985',
+ 900: '#0c4a6e'
+ }
+ }
+})