docs: improvements

Author: atinux

README.md

@@ -15,11 +15,12 @@
 
 ## Features
 
-- Zero configuration to start
-- PurgeCSS included for minimal CSS
-- Use latest CSS features (Stage 1)
-- Reference your Tailwind config in your app
-- Extendable by Nuxt modules
+- 👌  Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
+- ⚡️  PurgeCSS included for minimal CSS ⚡️
+- 🪄  Use latest CSS features *([Stage 1](https://cssdb.org/#stage-1))*
+- 🎨  Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
+- ⚙️  Reference your Tailwind config in your app 
+- 📦  Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
 
 [📖  Read more](https://tailwindcss.nuxtjs.org)
 

docs/content/en/index.md

@@ -4,12 +4,6 @@ description: 'Add Tailwind CSS to your Nuxt application in seconds.'
 position: 1
 category: ''
 categoryPosition: 1
-features:
-  - Zero configuration to start
-  - PurgeCSS included for minimal CSS
-  - Use latest CSS features (Stage 1)
-  - Reference your Tailwind config in your app
-  - Extendable by Nuxt modules
 ---
 
 <img src="/preview.png" class="light-img" />
@@ -19,14 +13,29 @@ Add [Tailwind CSS](https://tailwindcss.com) to your [Nuxt](https://nuxtjs.org) a
 
 ## Features
 
-<list :items="features"></list>
+- 👌&nbsp; Zero configuration to start
+- ⚡️&nbsp; PurgeCSS included for minimal CSS ⚡️
+- 🪄&nbsp; Use latest CSS features *([Stage 1](https://cssdb.org/#stage-1))*
+- 🎨&nbsp; Discover your Tailwind Colors *([see video](/#tailwind-colors))*
+- ⚙️&nbsp; Reference your Tailwind config in your app 
+- 📦&nbsp; Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
 
-<p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="p-2"></app-color-switcher></p>
+<p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="flex"></app-color-switcher></p>
 
-## Video
+## Videos
+
+### Quick start
 
 <video poster="https://res.cloudinary.com/nuxt/video/upload/v1596625297/nuxt-tailwindcss_ipv0ta.jpg" loop playsinline controls>
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.webm" type="video/webm" />
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.mp4" type="video/mp4" />
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.ogv" type="video/ogg" />
 </video>
+
+### Tailwind Colors
+
+<video poster="https://res.cloudinary.com/nuxt/video/upload/v1606994332/nuxt-tailwind-colors_qlio2t.jpg" loop playsinline controls>
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.mp4" type="video/mp4" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.ogv" type="video/ogg" />
+</video>

docs/content/en/setup.md

@@ -44,6 +44,12 @@ That's it! You can now use Tailwind classes in your Nuxt app ✨
 
 </alert>
 
+<alert type="info">
+
+Discover your color palette based on your Tailwind config on `/_tailwind` route.
+
+</alert>
+
 ## Tailwind Files
 
 When running `nuxt dev`, this module will look for these two files: