feat!: v4 (#287)

* feat!: upgrade to tailwindcss@2 (#270)

* chore: add alpha release script

* chore(release): 4.0.0-0

* chore(deps): update all non-major dependencies (#276)

Co-authored-by: Renovate Bot <[email protected]>

* chore: don't force darkMode option

* chore(release): 4.0.0-1

* fix: use purge as object and force it to provide purge options

* chore: update test to use purge.content

* chore(release): 4.0.0-2

* chore: add postcss-nested instead of preset

Waiting for csstools/postcss-preset-env#191 to be ready

* chore(release): 4.0.0-3

* chore: add autoprefixer too

* chore(release): 4.0.0-4

* update nuxt-postcss8

* update to @nuxt/postcss8

* chore(release): 4.0.0-5

* feat: tailwind jit (#288)

* feat: add Tailwind JIT support

* chore: improvements

* chore: remove duplicate postcss-nested

* chore: simplify

* chore(release): 4.0.0-6

* generate .nuxt/tailwind.config.js and use it for tailwind options + tailwind.jit option

Co-authored-by: Sébastien Chopin <[email protected]>

* chore: fix lint issue

* skip config dependent tests for now

* chore(release): 4.0.0-7

* refactor: typescript rewrite

* chore(release): 4.0.0-8

* remove wronly checked-in file

* fix: dont expose config without option defined

* chore(release): 4.0.0-9

* fix: revert to using object syntax

* chore(release): 4.0.0-10

* chore: add _hash to tailwind config

* chore: upgrade deps

* chore: update jit

* docs: update readme

* chore(release): 4.0.0-11

* chore(release): 4.0.0-12

* docs: prepare docs

* docs: fix links

* fix: missing dependency

* chore: upgrade docus

* docs: add tailwindcss

* docs: upgrade docus

* docs: small improvement

* docs: wtf netlify build

* docs: phrasing

* chore: ignore

Co-authored-by: Romain Lanz <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Sébastien Chopin <[email protected]>

Author: 5 people

.eslintignore

@@ -1,8 +1,5 @@
-# Common
 node_modules
 dist
 .nuxt
 coverage
-
-# Plugin
-lib/plugin.js
+src/*.js

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@nuxtjs/eslint-config-typescript"
+  ]
+}

.eslintrc.js

@@ -2,6 +2,66 @@
 
 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.
 
+## [4.0.0-12](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-11...v4.0.0-12) (2021-03-15)
+
+## [4.0.0-11](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-10...v4.0.0-11) (2021-03-15)
+
+## [4.0.0-10](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-9...v4.0.0-10) (2021-03-13)
+
+
+### Bug Fixes
+
+* revert to using object syntax ([a8d4acf](https://github.com/nuxt-community/tailwindcss-module/commit/a8d4acfd3ee60b14858f04a6af5d938276b1aa05))
+
+## [4.0.0-9](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-8...v4.0.0-9) (2021-03-13)
+
+
+### Bug Fixes
+
+* dont expose config without option defined ([d98086e](https://github.com/nuxt-community/tailwindcss-module/commit/d98086e7db5e110891c0c2dd97dbc79d352cef9b))
+
+## [4.0.0-8](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-7...v4.0.0-8) (2021-03-12)
+
+## [4.0.0-7](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-5...v4.0.0-7) (2021-03-12)
+
+
+### Features
+
+* tailwind jit ([#288](https://github.com/nuxt-community/tailwindcss-module/issues/288)) ([24dc6c0](https://github.com/nuxt-community/tailwindcss-module/commit/24dc6c028f9399a58d2e1d73021a9f6532466775))
+
+## [4.0.0-6](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-5...v4.0.0-6) (2021-03-12)
+
+
+### Features
+
+* tailwind jit ([#288](https://github.com/nuxt-community/tailwindcss-module/issues/288)) ([24dc6c0](https://github.com/nuxt-community/tailwindcss-module/commit/24dc6c028f9399a58d2e1d73021a9f6532466775))
+
+## [4.0.0-5](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.3...v4.0.0-5) (2021-03-10)
+
+## [4.0.0-4](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-3...v4.0.0-4) (2021-03-09)
+
+## [4.0.0-3](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-2...v4.0.0-3) (2021-03-08)
+
+## [4.0.0-2](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-1...v4.0.0-2) (2021-03-08)
+
+
+### Bug Fixes
+
+* use purge as object and force it to provide purge options ([910843f](https://github.com/nuxt-community/tailwindcss-module/commit/910843f10f6da538a261dfd7726ee82aeb6db6f1))
+
+## [4.0.0-1](https://github.com/nuxt-community/tailwindcss-module/compare/v4.0.0-0...v4.0.0-1) (2021-03-08)
+
+## [4.0.0-0](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.2...v4.0.0-0) (2021-03-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgrade to tailwindcss@2 (#270)
+
+### Features
+
+* upgrade to tailwindcss@2 ([#270](https://github.com/nuxt-community/tailwindcss-module/issues/270)) ([8ab33b8](https://github.com/nuxt-community/tailwindcss-module/commit/8ab33b802005b80cd372e9a268e1c20ac8db8007))
+
 ### [3.4.3](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.2...v3.4.3) (2021-03-10)
 
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Nuxt.js Team
+Copyright (c) Nuxt Community
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -16,8 +16,9 @@
 ## Features
 
 - 👌  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))*
+- 🗜  PurgeCSS included for minimal CSS ⚡️
+- ⚡️  Supports [Tailwind Just-In-Time](https://github.com/tailwindlabs/tailwindcss-jit)
+- 🪄  Includes [PostCSS Nested](https://github.com/postcss/postcss-nested)
 - 🎨  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/)

README.md

@@ -1,32 +1,22 @@
 ---
-title: Introduction
-description: 'Add Tailwind CSS to your Nuxt application in seconds.'
-position: 1
 category: 'Getting started'
-categoryPosition: 1
 ---
 
-<img src="/preview.png" class="light-img" />
-<img src="/preview-dark.png" class="dark-img" />
+# Introduction
 
-Add [Tailwind CSS](https://tailwindcss.com) to your [Nuxt](https://nuxtjs.org) application in seconds.
+> Add Tailwind CSS to your Nuxt application in seconds.
 
-<alert type="info">
-
-This module default to Tailwind v1, please look at [these instructions](/setup#tailwind-2) to upgrade to Tailwind v2.
-
-</alert>
+THis module help you setup [Tailwind CSS](https://tailwindcss.com) (version 2) to your [Nuxt](https://nuxtjs.org) application in seconds.
 
 ## Features
 
-- 👌&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 configuration *([see video](/#tailwind-colors))*
+- 👌&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 [PostCSS Nested](https://github.com/postcss/postcss-nested)
+- 🎨&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; Reference your Tailwind config in your app 
-
-<p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="flex"></app-color-switcher></p>
 
 ## Videos
 
@@ -46,4 +36,4 @@ This module default to Tailwind v1, please look at [these instructions](/setup#t
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.ogv" type="video/ogg" />
 </video>
 
-Learn more about the [Tailwind viewer](/tailwind-viewer).
+Learn more about the [Tailwind viewer](/tailwind/viewer).

babel.config.js

@@ -0,0 +1,130 @@
+---
+category: Getting started
+---
+
+# Setup
+
+> 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).
+
+</d-alert>
+
+<d-code-group>
+  <d-code-block label="Yarn" active>
+
+  ```bash
+  yarn upgrade nuxt
+  ```
+
+  </d-code-block>
+  <d-code-block label="NPM">
+
+  ```bash
+  npm update nuxt
+  ```
+
+  </d-code-block>
+</d-code-group>
+
+
+## Installation
+
+1. Add `@nuxtjs/tailwindcss` and `postcss` dependencies to your project:
+
+    <d-code-group>
+      <d-code-block label="Yarn" active>
+
+      ```bash
+      yarn add --dev @nuxtjs/tailwindcss postcss@latest
+      ```
+
+      </d-code-block>
+      <d-code-block label="NPM">
+
+      ```bash
+      npm install --save-dev @nuxtjs/tailwindcss postcss@latest
+      ```
+
+      </d-code-block>
+    </d-code-group>
+
+2. Add it to your `buildModules` section in your `nuxt.config.js`:
+
+    ```ts [nuxt.config.js]
+    export default {
+      buildModules: ['@nuxtjs/tailwindcss']
+    }
+    ```
+
+3. Create your `tailwind.config.js` running:
+
+    ```bash
+    npx tailwindcss init
+    ```
+
+<d-alert type="success">
+
+That's it! You can now use Tailwind classes in your Nuxt app ✨
+
+</d-alert>
+
+<d-alert type="info">
+
+Discover your color palette based on your Tailwind config with the [Tailwind viewer](/tailwind/viewer).
+
+</d-alert>
+
+
+## Tailwind Just-In-Time
+
+Tailwind recelently released [@tailwindcss/jit](https://github.com/tailwindlabs/tailwindcss-jit) to make the web development much faster.
+
+To activate the option, set `jit: true` in your `nuxt.config.js`:
+
+```ts [nuxt.config.js]
+export default {
+  tailwindcss: {
+    jit: true
+  }
+}
+```
+
+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:
+
+- `./assets/css/tailwind.css`
+- `./tailwind.config.js`
+
+If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
+
+<d-alert type="info">
+
+You can configure the paths in the [module options](/options).
+
+</d-alert>
+
+Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section.
+
+## Options
+
+You can customize the module behaviour by using the `tailwindcss` property in `nuxt.config.js`:
+
+```ts [nuxt.config.js]
+export default {
+  tailwindcss: {
+    // Options
+  }
+}
+```
+
+See the [module options](/options).