-
Notifications
You must be signed in to change notification settings - Fork 180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: migrate to tailwind v3 #407
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,8 +16,6 @@ | |
## Features | ||
|
||
- 👌 Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))* | ||
- 🗜 PurgeCSS included for minimal CSS ⚡️ | ||
- ⚡️ Supports [Tailwind Just-In-Time](https://github.com/tailwindlabs/tailwindcss-jit) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's the default engine now. |
||
- 🪄 Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting) | ||
- 🎨 Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))* | ||
- ⚙️ Reference your Tailwind config in your app | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -77,26 +77,6 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie | |
|
||
</d-alert> | ||
|
||
|
||
## Tailwind Just-In-Time | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The default now, as mentioned above. |
||
|
||
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: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -89,7 +89,7 @@ Learn more about it in the [Referencing in the application](/tailwind/config#ref | |
- 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. | ||
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 { | ||
|
@@ -113,11 +113,9 @@ export default { | |
tailwindcss: { | ||
config: { | ||
/* Extend the Tailwind config here */ | ||
purge: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The new content syntax. |
||
content: [ | ||
'content/**/**.md' | ||
] | ||
} | ||
content: [ | ||
'content/**/**.md' | ||
] | ||
} | ||
} | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,6 +5,7 @@ csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j | |
fullscreen: true | ||
--- | ||
|
||
<!-- TODO: Replace with tailwind's native dark mode support. --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need for a plugin demo. |
||
# Dark Mode Example | ||
|
||
> Live example of dark mode with Nuxt TailwindCSS on CodeSandbox. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,23 +12,20 @@ category: Tailwind CSS | |
```js{}[tailwind.config.js] | ||
{ | ||
theme: {}, | ||
variants: {}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not available anymore due to the native jit engine. |
||
plugins: [], | ||
purge: { | ||
content: [ | ||
`components/**/*.{vue,js}`, | ||
`layouts/**/*.vue`, | ||
`pages/**/*.vue`, | ||
`plugins/**/*.{js,ts}`, | ||
`nuxt.config.{js,ts}` | ||
] | ||
} | ||
content: [ | ||
`components/**/*.{vue,js}`, | ||
`layouts/**/*.vue`, | ||
`pages/**/*.vue`, | ||
`plugins/**/*.{js,ts}`, | ||
`nuxt.config.{js,ts}` | ||
] | ||
} | ||
``` | ||
|
||
> 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. | ||
You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and the [content configuration](https://tailwindcss.com/docs/content-configuration) on Tailwind docs. | ||
|
||
## Overwriting the configuration | ||
|
||
|
@@ -125,21 +122,19 @@ This hook can be asynchronous (using `async/await`) and is called after merging | |
|
||
The provided config will be merged using [defu's array function merger](https://github.com/nuxt-contrib/defu#array-function-merger). | ||
|
||
When giving an array to the `purge.content`, it will concat with the default value. | ||
When giving an array to the `content`, it will concat with the default value. | ||
|
||
**Example** | ||
|
||
```js{}[tailwind.config.js] | ||
module.exports = { | ||
purge: { | ||
content: [ | ||
'content/**/*.md' | ||
] | ||
} | ||
content: [ | ||
'content/**/*.md' | ||
] | ||
} | ||
``` | ||
|
||
The `purge.content` option will be: | ||
The `content` option will be: | ||
|
||
```js | ||
[ | ||
|
@@ -156,15 +151,13 @@ If you want to fully overwrite, you can use a `function` that receives the defau | |
|
||
```js{}[tailwind.config.js] | ||
module.exports = { | ||
purge: { | ||
content (contentDefaults) { | ||
return contentDefaults.map(file => file.replace('.js', '.ts')) | ||
} | ||
content (contentDefaults) { | ||
return contentDefaults.map(file => file.replace('.js', '.ts')) | ||
} | ||
} | ||
``` | ||
|
||
The `purge.content` option will be: | ||
The `content` option will be: | ||
|
||
```js | ||
[ | ||
|
@@ -178,22 +171,23 @@ The `purge.content` option will be: | |
|
||
<d-alert type="info"> | ||
|
||
This merging strategy of with a function only applies to `plugins` and `purge.content` since the default value is defined as an `Array` | ||
This merging strategy of with a function only applies to `plugins` and `content` since the default value is defined as an `Array` | ||
|
||
</d-alert> | ||
|
||
### Whitelisting classes | ||
|
||
If you need to whitelisting classes and avoid purge system, you need to precise `safelist` option like below : | ||
If you need to whitelist classes and avoid the content purge system, you need to specify the `safelist` option like below : | ||
|
||
```js{}[tailwind.config.js] | ||
module.exports = { | ||
purge: { | ||
options: { | ||
// Whitelisting some classes to avoid purge | ||
safelist: ['whitelisted'] | ||
} | ||
} | ||
// Whitelisting some classes to avoid content purge | ||
safelist: [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The new way to do safelists. |
||
'whitelisted', | ||
{ | ||
pattern: /bg-(red|green|blue)-(100|200|300)/, | ||
}, | ||
] | ||
} | ||
``` | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,10 +11,11 @@ | |
"license": "MIT", | ||
"homepage": "https://tailwindcss.nuxtjs.org", | ||
"devDependencies": { | ||
"autoprefixer": "^10.4.0", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shall be a dev dependency according to tailwind's installation instructions. |
||
"docus": "^0.1.5", | ||
"nuxt": "^2.15.4", | ||
"postcss": "^8.2.9", | ||
"tailwindcss": "^2.0.4", | ||
"postcss": "^8.4.4", | ||
"tailwindcss": "^3.0.1", | ||
"vue-plausible": "^1.1.4" | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's not included now anymore.