.github/workflows/ci.yml

@@ -3,10 +3,12 @@ name: ci
 on:
   push:
     branches:
-      - master
+      - main
+      - dev
   pull_request:
     branches:
-      - master
+      - main
+      - dev
 
 jobs:
   ci:

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+### [3.4.3](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.2...v3.4.3) (2021-03-10)
+
+
+### Bug Fixes
+
+* use nuxt resolver to import `tailwind.config.js` ([#286](https://github.com/nuxt-community/tailwindcss-module/issues/286)) ([62526cf](https://github.com/nuxt-community/tailwindcss-module/commit/62526cf1af8319275dbf39f8d330063e661b1b50))
+
 ### [3.4.2](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.1...v3.4.2) (2020-12-22)
 
 ### [3.4.1](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.0...v3.4.1) (2020-12-18)

README.md

@@ -19,7 +19,7 @@
 - ⚡️  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 
+- ⚙️  Reference your Tailwind config in your app
 - 📦  Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
 
 [📖  Read more](https://tailwindcss.nuxtjs.org)
@@ -55,7 +55,7 @@ That's it! You can now use Tailwind classes in your Nuxt app ✨
 
 You can contribute to this module online with CodeSandBox:
 
-[![Edit @nuxtjs/tailwindcss](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-community/tailwindcss-module/tree/master/?fontsize=14&hidenavigation=1&theme=dark)
+[![Edit @nuxtjs/tailwindcss](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-community/tailwindcss-module/tree/main/?fontsize=14&hidenavigation=1&theme=dark)
 
 Or locally:
 

docs/content/en/examples/postcss-plugin.md

@@ -0,0 +1,13 @@
+---
+title: Example with PostCSS Plugins
+menuTitle: PostCSS Plugins
+description: 'Live example of Nuxt Tailwind with postcss-nested plugin'
+position: 9
+category: Examples
+csb_link: https://codesandbox.io/embed/postcss-plugin-with-nuxt-tailwind-gyfo8
+fullscreen: true
+---
+
+Example with [postcss-nested](https://github.com/postcss/postcss-nested) plugin, see [how to add PostCSS plugins](https://nuxtjs.org/faq/postcss-plugins/) in Nuxt.
+
+<code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/index.md

@@ -2,7 +2,7 @@
 title: Introduction
 description: 'Add Tailwind CSS to your Nuxt application in seconds.'
 position: 1
-category: ''
+category: 'Getting started'
 categoryPosition: 1
 ---
 

docs/content/en/options.md

@@ -1,9 +1,8 @@
 ---
 title: Options
 description: 'You can configure the module easily with the tailwindcss property.'
-position: 5
-category: Guide
-categoryPosition: 2
+position: 3
+category: Getting started
 ---
 
 You can configure the module by using the `tailwindcss` property in the `nuxt.config.js`:

docs/content/en/setup.md

@@ -2,7 +2,7 @@
 title: Setup
 description: 'Using TailwindCSS in your Nuxt project is only one command away'
 position: 2
-category: Guide
+category: Getting started
 ---
 
 Using TailwindCSS in your Nuxt project is only one command away ✨
@@ -93,11 +93,11 @@ In the meantime, you can upgrade Tailwind by using the [compatibility build](htt
 yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
 ```
 
-Please ensure you are using `Node >= 12.13.0` in order to use the version 2 of TailwindCSS.
+Please ensure you are using `Node >= 12.13.0` in order to use version 2 of TailwindCSS.
 
 <alert type="warning">
 
-We have seen an issue with NPM regarding the packages resolution (see [comment](https://github.com/nuxt-community/tailwindcss-module/issues/202#issuecomment-738442349)), we hightly recommend to use [Yarn V1](https://classic.yarnpkg.com/en/docs/install) when working with Nuxt 2.
+We have seen an issue with NPM regarding the packages resolution (see [comment](https://github.com/nuxt-community/tailwindcss-module/issues/202#issuecomment-738442349)), we highly recommend using [Yarn V1](https://classic.yarnpkg.com/en/docs/install) when working with Nuxt 2.
 
 </alert>
 

docs/content/en/tailwind-config.md

@@ -1,15 +1,15 @@
 ---
 title: Tailwind Config
 description: 'You can configure the integration easily with the storybook property.'
-position: 3
+position: 4
 category: Guide
 ---
 
 `@nuxtjs/tailwindcss` configures the Tailwind configuration to have the best user experience as possible by default.
 
 ## Default Configuration
 
-```js
+```js{}[tailwind.config.js]
 {
   theme: {},
   variants: {},
@@ -30,7 +30,7 @@ category: Guide
 }
 ```
 
-> The file is [available on GitHub](https://github.com/nuxt-community/tailwindcss-module/blob/master/lib/files/tailwind.config.js)
+> The file is [available on GitHub](https://github.com/nuxt-community/tailwindcss-module/blob/main/lib/files/tailwind.config.js)
 
 You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and the [purge option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) on Tailwind docs.
 
@@ -79,7 +79,7 @@ Learn more about the [Tailwind config](https://tailwindcss.com/docs/configuratio
 
 You can also use your `nuxt.config.js` to set your Tailwind Config with the `tailwindcss.config` property:
 
-```js{}[nuxt.config.js]
+```js [nuxt.config.js]
 import tailwindTypography from '@tailwindcss/typography'
 
 export default {
@@ -186,6 +186,22 @@ This merging strategy of with a function only applies to `plugins` and `purge.co
 
 </alert>
 
+### Whitelisting classes
+
+If you need to whitelisting classes and avoid purge system, you need to precise `safelist` option like below :
+
+```js{}[tailwind.config.js]
+module.exports = {
+  purge: {
+    options: {
+      // Whitelisting some classes to avoid purge
+      safelist: ['whitelisted']
+    }
+  }
+}
+```
+
+
 ## Referencing in the application
 
 It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.

docs/content/en/tailwind-viewer.md

@@ -1,7 +1,7 @@
 ---
 title: Tailwind Viewer
 description: 'Visualize your Tailwind configuration with the viewer.'
-position: 4
+position: 5
 category: Guide
 categoryPosition: 2
 ---

docs/nuxt.config.js

@@ -1,17 +1,15 @@
-import theme from '@nuxt/content-theme-docs'
+import { withDocus } from 'docus'
 
-export default theme({
-  env: {
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN
+export default withDocus({
+  docus: {
+    colors: {
+      primary: '#38b2ac'
+    }
   },
-  loading: { color: '#38b2ac' },
   buildModules: [
-    // https://github.com/bdrtsky/nuxt-ackee
-    'nuxt-ackee'
+    'vue-plausible'
   ],
-  ackee: {
-    server: 'https://ackee.nuxtjs.com',
-    domainId: '9dfafc05-b435-4ebd-a474-b836e6678e92',
-    detailed: true
+  plausible: {
+    domain: 'tailwindcss.nuxtjs.org'
   }
 })

docs/package.json

@@ -11,10 +11,10 @@
   "license": "MIT",
   "homepage": "https://tailwindcss.nuxtjs.org",
   "dependencies": {
-    "@nuxt/content-theme-docs": "^0.8.2",
-    "nuxt": "^2.14.12"
+    "docus": "^0.0.9",
+    "nuxt": "^2.15.2"
   },
   "devDependencies": {
-    "nuxt-ackee": "^2.0.0"
+    "vue-plausible": "^1.1.3"
   }
 }