CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.3.0](https://github.com/nuxt-community/tailwindcss-module/compare/v5.2.0...v5.3.0) (2022-07-13)
+
+
+### Features
+
+* extends support ([#499](https://github.com/nuxt-community/tailwindcss-module/issues/499)) ([f90b80b](https://github.com/nuxt-community/tailwindcss-module/commit/f90b80b0289f3ab0285826fae727c37e560db657))
+* support for more semantic injection positions ([#501](https://github.com/nuxt-community/tailwindcss-module/issues/501)) ([1bdd83c](https://github.com/nuxt-community/tailwindcss-module/commit/1bdd83cc2bdb39cb80ad476a22b791f3bdeb9cb9))
+
 ## [5.2.0](https://github.com/nuxt-community/tailwindcss-module/compare/v5.1.3...v5.2.0) (2022-07-11)
 
 

build.config.ts

@@ -0,0 +1,8 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  externals: [
+    'pathe',
+    'minimatch'
+  ]
+})

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

@@ -83,15 +83,29 @@ Learn more about it in the [Referencing in the application](/tailwind/config#ref
 
 ## `injectPosition`
 
-- Default: `0`
+- Default: `'first'`
 
-You can use any integer to adjust the position of the [global CSS](https://v3.nuxtjs.org/api/configuration/nuxt.config#css) injection, which affects the CSS priority.
+This option lets you adjust the position of the [global CSS](https://v3.nuxtjs.org/api/configuration/nuxt.config#css) injection, which affects the CSS priority. You can use multiple formats to define the position:
+
+* Use `'first'` and `'last'` literals to make Tailwind CSS first or last respectively. First position has the lowest priority, last position overrides everything and hence has the highest priority.
+* Use `{ after: 'some/existing/file.css' } ` to specify the position explicitly.
+* You can use any integer to specify absolute position in the array. This is the most fragile way, as it's easy to forget to adjust it when changing CSS settings.
 
 ```ts [nuxt.config]
 export default {
+  css: [
+    'assets/low-priorty.pcss',
+    'assets/high-priorty.pcss'
+  ],
   tailwindcss: {
-    injectPosition: 0 // equal to nuxt.options.css.unshift(cssPath)
-    // injectPosition: Infinity, // equal to nuxt.options.css.push(cssPath)
+    injectPosition: { 
+        // 'low-priority' will have lower priority than Tailwind stylesheet, 
+        // while 'high-priorty' will override it
+        after: 'assets/low-priorty.pcss'
+    }
+    // injectPosition: 'first'   // equal to nuxt.options.css.unshift(cssPath)
+    // injectPosition: 'last'    // equal to nuxt.options.css.push(cssPath)
+    // injectPosition: 1         // after 'low-priority.pcss'
   }
 }
 ```

docs/content/2.tailwind/1.config.md

@@ -28,6 +28,7 @@ You can learn more about the [Tailwind configuration](https://tailwindcss.com/do
 ## Overwriting the configuration
 
 You can extend the default configuration:
+
 - with a [tailwind.config.js](#tailwindconfigjs) file
 - using the [config option](#config-option)
 - with the `tailwindcss:config` Nuxt hook
@@ -89,7 +90,6 @@ This config has less priority over the [tailwind.config.js](#tailwindconfigjs) f
 
 ::
 
-
 ### `tailwindcss:config` hook
 
 ::alert{type="warning"}
@@ -188,7 +188,6 @@ module.exports = {
 }
 ```
 
-
 ## Referencing in the application
 
 It can often be useful to reference Tailwind configuration values at runtime, e.g. to access some of your theme values when dynamically applying inline styles in a component.

docs/content/2.tailwind/3.editor-support.md

@@ -0,0 +1,33 @@
+---
+title: Editor Support
+description: 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.
+
+There are a few things you need to keep in mind so that the extension works correctly:
+
+1. You need to have a `tailwind.config.js` file in the root of your project, so that the extension gets enabled. You can create the file using `npx tailwindcss init`. The file can have another name, such as `tailwind.config.cjs` in which case you have to configure the extension so that it picks up the new name:
+
+```json [.vscode/settings.json]
+"tailwindCSS.experimental.configFile": "tailwind.config.cjs"
+```
+
+If you have multiple Tailwind config files, you can use the array syntax:
+
+```json [.vscode/settings.json]
+"tailwindCSS.experimental.configFile": {
+  "themes/simple/tailwind.config.js": "themes/simple/**",
+  "themes/neon/tailwind.config.js": "themes/neon/**"
+}
+```
+
+2. The tailwind configuration file must not have any TypeScript or ESM syntax in the file. That means that you have to use CommonJS exports and can't use a `tailwind.config.ts` file with TypeScript syntax. See https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685.
+
+3. Add the following configuration to your `.vscode/settings.json` file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:
+
+```json [.vscode/settings.json]
+"files.associations": {
+	"*.css": "tailwindcss"
+}
+```

docs/content/3.examples/6.content.md

@@ -0,0 +1,16 @@
+---
+title: '@nuxt/content'
+description: '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!
+
+```md
+Hello, this is a [Markdown]{.px-1 .bg-blue-200 .rounded-lg} file!
+
+::div{.w-full .bg-green-200 .p-4}
+Another way to use it!
+::
+```
+
+Learn more about the [Span Syntax](https://content.nuxtjs.org/guide/writing/mdc#span-text) and how to use classes in Markdown files!

docs/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
     "@docus/github": "npm:@docus/github-edge@latest",
-    "nuxt": "^3.0.0-rc.3",
+    "nuxt": "^3.0.0-rc.5",
     "vue-plausible": "^1.3.1"
   }
 }