nuxt-modules · Jul 6, 2021 · Jul 21, 2021 · Nov 17, 2021 · Nov 17, 2021 · Nov 17, 2021
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,11 +4,9 @@ on:
   push:
     branches:
       - main
-      - dev
   pull_request:
     branches:
       - main
-      - dev
 
 jobs:
   ci:
@@ -17,10 +15,10 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [12]
+        node: [16]
 
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -40,10 +38,10 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - name: Test
-        run: yarn test
+      # - name: Test
+      #   run: yarn test
 
-      - name: Coverage
-        run: yarn codecov
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      # - name: Coverage
+      #   run: yarn codecov
+      #   env:
+      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ coverage
 dist
 sw.js
 package-lock.json
+.output
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,51 @@
 
 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.0.0](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.0-4...v5.0.0) (2022-03-08)
+
+
+### Bug Fixes
+
+* add composables directory to content ([c36333a](https://github.com/nuxt-community/tailwindcss-module/commit/c36333a827af6c385a23647fb9bd381b69b8c77a))
+
+## [5.0.0-4](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.0-3...v5.0.0-4) (2022-02-10)
+
+
+### Bug Fixes
+
+* import `tailwindcss/resolveConfig` with extension ([#426](https://github.com/nuxt-community/tailwindcss-module/issues/426)) ([d0aca40](https://github.com/nuxt-community/tailwindcss-module/commit/d0aca40e45c0854eae6affdd3a736ec44553c04e))
+
+## [5.0.0-3](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.0-2...v5.0.0-3) (2022-02-08)
+
+
+### Bug Fixes
+
+* properly resolve `tailwind.config` (resolves [#425](https://github.com/nuxt-community/tailwindcss-module/issues/425)) ([7a7a5f6](https://github.com/nuxt-community/tailwindcss-module/commit/7a7a5f698f82d1c49360a41d6a4e9aa431aed0c1))
+
+## [5.0.0-2](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.0-1...v5.0.0-2) (2022-02-08)
+
+
+### Bug Fixes
+
+* de-default tailwind-config-viewer import ([75ea329](https://github.com/nuxt-community/tailwindcss-module/commit/75ea329a6bd56137f2060255c453c136f3d5c069))
+
+## [5.0.0-1](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.0-0...v5.0.0-1) (2022-02-08)
+
+## [5.0.0-0](https://github.com/nuxt-community/tailwindcss-module/compare/v4.2.1...v5.0.0-0) (2022-02-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* rewrite with module-builder and nuxt/kit (#419)
+
+### Features
+
+* add css inject position ([#381](https://github.com/nuxt-community/tailwindcss-module/issues/381)) ([4510784](https://github.com/nuxt-community/tailwindcss-module/commit/45107842bb08556b7383dd6b51cf74b6d2dd4a24))
+* migrate to tailwind v3 ([#407](https://github.com/nuxt-community/tailwindcss-module/issues/407)) ([eacaa5e](https://github.com/nuxt-community/tailwindcss-module/commit/eacaa5e167887f729611f9cc6330e44df99c71c5))
+
+
+* rewrite with module-builder and nuxt/kit ([#419](https://github.com/nuxt-community/tailwindcss-module/issues/419)) ([8ce8255](https://github.com/nuxt-community/tailwindcss-module/commit/8ce8255daa83f34361292e896dda6addca694587))
+
 ## [4.2.0](https://github.com/nuxt-community/tailwindcss-module/compare/v4.1.3...v4.2.0) (2021-06-22)
 
 

diff --git a/README.md b/README.md
@@ -8,20 +8,20 @@
 [![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
 
-> [Tailwind CSS](https://tailwindcss.com) module for [NuxtJS](https://nuxtjs.org) with [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
+> [Tailwind CSS](https://tailwindcss.com) module for [Nuxt](https://nuxtjs.org) with [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
 
-- [✨ &nbsp;Release Notes](https://tailwindcss.nuxtjs.org/releases)
+- [✨ &nbsp;Release Notes](https://github.com/nuxt-community/tailwindcss-module/releases)
+- [▶️ Play online](https://stackblitz.com/edit/nuxt-starter-rnulzp?file=app.vue)
 - [📖 &nbsp;Documentation](https://tailwindcss.nuxtjs.org)
 
 ## Features
 
 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
-- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️
-- ⚡️&nbsp; Supports [Tailwind Just-In-Time](https://github.com/tailwindlabs/tailwindcss-jit)
 - 🪄&nbsp; Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting)
 - 🎨&nbsp; Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
 - ⚙️&nbsp; Reference your Tailwind config in your app
 - 📦&nbsp; Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
+- 🚀&nbsp; [Nuxt 3](https://v3.nuxtjs.org) support
 
 [📖 &nbsp;Read more](https://tailwindcss.nuxtjs.org)
 
@@ -30,24 +30,23 @@
 1. Add `@nuxtjs/tailwindcss` dependency to your project
 
 ```bash
-# Using npm
-npm install --save-dev @nuxtjs/tailwindcss
 # Using yarn
 yarn add --dev @nuxtjs/tailwindcss
+
+# Using npm
+npm install --save-dev @nuxtjs/tailwindcss
 ```
 
-2. Add `@nuxtjs/tailwindcss` to the `buildModules` section of `nuxt.config.js`
+2. Add `@nuxtjs/tailwindcss` to the `modules` section of `nuxt.config.js`
 
 ```js
 {
-  buildModules: [
+  modules: [
     '@nuxtjs/tailwindcss'
   ]
 }
 ```
 
-ℹ️ If you are using `nuxt < 2.9.0`, use `modules` property instead.
-
 That's it! You can now use Tailwind classes in your Nuxt app ✨
 
 [📖 &nbsp;Read more](https://tailwindcss.nuxtjs.org/setup)
@@ -61,14 +60,15 @@ You can contribute to this module online with CodeSandBox:
 Or locally:
 
 1. Clone this repository
-2. Install dependencies using `yarn install` or `npm install`
-3. Start development server using `yarn dev` or `npm run dev`
+2. Install dependencies using `yarn install`
+3. Prepare for development using `yarn dev:setup`
+4. Start development server using `yarn dev`
 
 ## License
 
 [MIT License](./LICENSE)
 
-Copyright (c) Nuxt.js Team
+Copyright (c) Nuxt Community
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/tailwindcss/latest.svg

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -6,13 +6,11 @@ category: 'Getting started'
 
 > Add Tailwind CSS to your Nuxt application in seconds.
 
-This module help you setup [Tailwind CSS](https://tailwindcss.com) (version 2) to your [Nuxt](https://nuxtjs.org) application in seconds.
+This module help you setup [Tailwind CSS](https://tailwindcss.com) (version 3) to your [Nuxt](https://nuxtjs.org) application in seconds.
 
 ## Features
 
 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
-- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️
-- ⚡️&nbsp; Supports [Tailwind Just-In-Time](https://tailwindcss.com/docs/just-in-time-mode)
 - 🪄&nbsp; Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting)
 - 🎨&nbsp; Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
 - ⚙️&nbsp; Reference your Tailwind config in your app

diff --git a/docs/content/2.setup.md b/docs/content/2.setup.md
@@ -6,10 +6,6 @@ category: Getting started
 
 > Using TailwindCSS in your Nuxt project is only one command away ✨
 
-## Prerequisites
-
-Tailwind 2 needs PostCSS 8, to work with Nuxt 2, this module uses [@nuxt/postcss8](https://github.com/nuxt/postcss8) that requires Nuxt `>= 2.15.3`.
-
 <d-alert>
 
 Please make sure to update your Nuxt version to be minimum [v2.15.3](https://github.com/nuxt/nuxt.js/releases/tag/v2.15.3).
@@ -36,20 +32,20 @@ Please make sure to update your Nuxt version to be minimum [v2.15.3](https://git
 
 ## Installation
 
-1. Add `@nuxtjs/tailwindcss` and `postcss` dependencies to your project:
+1. Add `@nuxtjs/tailwindcss` dependency to your project:
 
     <d-code-group>
       <d-code-block label="Yarn" active>
 
       ```bash
-      yarn add --dev @nuxtjs/tailwindcss postcss@latest
+      yarn add --dev @nuxtjs/tailwindcss
       ```
 
       </d-code-block>
       <d-code-block label="NPM">
 
       ```bash
-      npm install --save-dev @nuxtjs/tailwindcss postcss@latest
+      npm install --save-dev @nuxtjs/tailwindcss
       ```
 
       </d-code-block>
@@ -81,26 +77,6 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie
 
 </d-alert>
 
-
-## Tailwind Just-In-Time
-
-Tailwind recently released [@tailwindcss/jit](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) to make the web development much faster.
-
-To activate the option:
-- create and modify your custom `tailwind.config.js` as mentioned in [the tailwind's documentation](https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode)
-- then override the purge config directly into the `tailwind.config.js` file to select the file to want to watch
-
-
-```ts [tailwind.config.js]
-module.exports = {
-  mode: 'jit'
-}
-```
-
-_The double tilde to mention the Nuxt config file is an alias to the root directory which could be different from the sources directory._
-
-Restart your Nuxt server and see how fast it is now ⚡️
-
 ## Tailwind Files
 
 When running `nuxt dev`, this module will look for these two files:

diff --git a/docs/content/3.options.md b/docs/content/3.options.md
@@ -14,7 +14,9 @@ export default {
     cssPath: '~/assets/css/tailwind.css',
     configPath: 'tailwind.config.js',
     exposeConfig: false,
-    config: {}
+    config: {},
+    injectPosition: 0,
+    viewer: true,
   }
 }
 ```
@@ -83,6 +85,24 @@ export default {
 
 Learn more about it in the [Referencing in the application](/tailwind/config#referencing-in-the-application) section.
 
+## `injectPosition`
+
+- Default: `0`
+
+You can use any integer to adjust the position of the css insertion.
+The position of the [global css](https://nuxtjs.org/guides/configuration-glossary/configuration-css) injection, which affects the css priority.
+
+```ts [nuxt.config.js]
+export default {
+  tailwindcss: {
+    injectPosition: 0 // equal to nuxt.options.css.unshift(cssPath)
+    // injectPosition: Infinity, // equal to nuxt.options.css.push(cssPath)
+  }
+}
+```
+
+Learn more about overwriting Tailwind config [here](/tailwind/config#overwriting-the-configuration).
+
 ## `config`
 
 - Default: [see tailwind config section](/tailwind/config)
@@ -94,11 +114,9 @@ export default {
   tailwindcss: {
     config: {
       /* Extend the Tailwind config here */
-      purge: {
-        content: [
-          'content/**/**.md'
-        ]
-      }
+      content: [
+        'content/**/**.md'
+      ]
     }
   }
 }

diff --git a/docs/content/examples/1.basic.md b/docs/content/examples/1.basic.md
@@ -6,7 +6,7 @@ fullscreen: true
 
 # Basic Usage Example
 
-> Live example of basic usage of Nuxt TailwindCSS on CodeSandbox.
+> Live example of basic usage of Nuxt Tailwind CSS on CodeSandbox.
 
 Minimal example of a Nuxt project with Tailwind CSS module.
 

diff --git a/docs/content/examples/2.dark-mode.md b/docs/content/examples/2.dark-mode.md
@@ -5,9 +5,10 @@ csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j
 fullscreen: true
 ---
 
+<!-- TODO: Replace with tailwind's native dark mode support. -->
 # Dark Mode Example
 
-> Live example of dark mode with Nuxt TailwindCSS on CodeSandbox.
+> Live example of dark mode with Nuxt Tailwind CSS on CodeSandbox.
 
 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/examples/4.postcss-plugin.md b/docs/content/examples/4.postcss-plugin.md
@@ -5,6 +5,7 @@ csb_link: https://codesandbox.io/embed/postcss-plugin-with-nuxt-tailwind-gyfo8
 fullscreen: true
 ---
 
+<!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
 # Example with PostCSS Plugins
 
 > Live example of Nuxt Tailwind with postcss-color-gray plugin

diff --git a/docs/content/settings.json b/docs/content/settings.json
@@ -1,5 +1,5 @@
 {
-  "title": "Nuxt TailwindCSS",
+  "title": "Nuxt Tailwind CSS",
   "url": "https://tailwindcss.nuxtjs.org",
   "logo": {
     "light": "/logo-light.svg",
-Original file line number
+Diff line change
@@ @@ -9,3 +9,4 @@ coverage @@
     dist
     sw.js
     package-lock.json
+    .output