Skip to content

Commit

Permalink
Revert "refactor: first class HMR support (#795)" (#817)
Browse files Browse the repository at this point in the history
This reverts commit 25b9f9e.
  • Loading branch information
ineshbose committed Feb 28, 2024
1 parent 25b9f9e commit 2ae28e5
Show file tree
Hide file tree
Showing 15 changed files with 267 additions and 375 deletions.
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/2.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,13 +167,13 @@ You can edit the endpoint by `viewer.endpoint` and if you'd like to export the v

- Default: `false`

You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt application with Tailwind. Read more in [Editor Support](/tailwind/editor-support).
You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt applicatio with Tailwind. Read more in [Editor Support](/tailwind/editor-support).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
tailwindcss: {
editorSupport: true
// editorSupport: { autocompleteUtil: { as: 'tailwindClasses' } }
// editorSupport: { autocompleteUtil: { as: 'tailwindClasses' }, generateConfig: true }
}
})
```
33 changes: 14 additions & 19 deletions docs/content/2.tailwind/3.editor-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Add the following configuration to your `.vscode/settings.json` file, so that Ta

If you use pnpm, ensure that tailwindcss is installed in your top-level node_modules folder.

## String Classes Autocomplete
## Autocomplete

When using strings of Tailwind classes, you can enable IntelliSense suggestions using the [`editorSupport.autocompleteUtil`](/getting-started/configuration#editorsupport) option. You will have to add the following VSCode setting:

Expand All @@ -44,20 +44,9 @@ const variantClasses = {
</script>
```

## Configuration IntelliSense
## Load Config File

Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind.config.cjs` that you can use by adding the following VSCode setting:

```diff [.vscode/settings.json]
// ...
+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
"files.associations": {
"*.css": "tailwindcss"
},
// ...
```

If you require more customisation to what configuration the IntelliSense extension reads, you can take advantage of hooks, especially the `tailwindcss:resolvedConfig` hook that runs the configuration through [`tailwindcss/resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/resolveConfig.js) to provide the complete config object.
Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you happen to use a lower version and/or require to generate a flat configuration, you can do so using [`editorSupport.generateConfig`](/getting-started/configuration#editorsupport) option, or you can use the `tailwindcss:resolvedConfig` hook and a custom Nuxt module:

```ts [modules/tw-cjs-config.ts]
import { defineNuxtModule, addTemplate } from '@nuxt/kit'
Expand All @@ -66,11 +55,8 @@ export default defineNuxtModule({
setup (options, nuxt) {
nuxt.hook('tailwindcss:resolvedConfig', (config) => {
addTemplate({
filename: 'intellisense-tw.cjs', // gets prepended by .nuxt/
getContents: () => `
/* my-comment */
module.exports = ${JSON.stringify(config)}
`,
filename: 'tailwind.config.cjs', // gets prepended by .nuxt/
getContents: () => `module.exports = ${JSON.stringify(config)}`,
write: true
})
})
Expand All @@ -79,3 +65,12 @@ export default defineNuxtModule({
```

This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using `JSON.stringify` will remove plugins from your configuration.

```diff [.vscode/settings.json]
// ...
+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
"files.associations": {
"*.css": "tailwindcss"
},
// ...
```
11 changes: 0 additions & 11 deletions playground/modules/resolved.ts

This file was deleted.

32 changes: 1 addition & 31 deletions playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import { existsSync } from 'node:fs'
import { resolve } from 'pathe'
import { consola } from 'consola'
import type { ModuleHooks, ModuleOptions } from '../src/types'

const logger = consola.withTag('nuxt:tailwindcss:playground')

export default defineNuxtConfig({
extends: ['./theme'],
Expand All @@ -17,33 +13,7 @@ export default defineNuxtConfig({
exposeConfig: true,
cssPath: '~/assets/css/tailwind.css',
editorSupport: true
} satisfies Partial<ModuleOptions>,
hooks: {
'tailwindcss:loadConfig': (config, configPath, idx) => {
logger.info('Running `tailwindcss:loadConfig` hook...', { configPath, idx })

if (idx === 0 && config) {
config.theme = config.theme ?? {}
config.theme.extend = config.theme.extend ?? {}
config.theme.extend.screens = { md2: '100px' }
} else if (idx === 1 && config) {
config.content = config.content ?? []
Array.isArray(config.content) ? config.content.push('my-content') : config.content.files.push('my-file-content')
}
},
'tailwindcss:config': (config) => {
logger.info('Running `tailwindcss:config` hook...')

config.theme = config.theme ?? {}
config.theme.extend = config.theme.extend ?? {}
config.theme.extend.colors = config.theme.extend.colors ?? {}
// @ts-ignore
config.theme.extend.colors.extendedColor = '#f0ff0f'
},
'tailwindcss:resolvedConfig': (_config) => {
logger.info('Running `tailwindcss:resolvedConfig` hook...')
}
} satisfies Partial<ModuleHooks>,
},
content: {
documentDriven: true
},
Expand Down
4 changes: 0 additions & 4 deletions playground/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@
<span class="text-blue-500">meow!</span>
</div>
<p class="text-brand">
This color comes from the `./tailwind.config`
</p>
<p class="text-accent">
This color comes from the `./theme` layer
</p>
<div>
Expand All @@ -38,6 +35,5 @@
import { tw } from '#imports'
import tailwindConfig from '#tailwind-config'
// const tw = <T>(s: T) => s
const mainDivClass = tw`max-w-screen-lg p-4 mx-auto space-y-4`
</script>
3 changes: 1 addition & 2 deletions playground/theme/tailwind.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ module.exports = {
theme: {
extend: {
colors: {
brand: colors.fuchsia['500'],
accent: colors.fuchsia['500']
brand: colors.fuchsia['500']
}
}
}
Expand Down
128 changes: 0 additions & 128 deletions src/config.ts

This file was deleted.

2 changes: 1 addition & 1 deletion src/logger.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { LogLevels } from 'consola'
import { useLogger } from '@nuxt/kit'

export default useLogger('nuxt:tailwindcss') as import('consola').ConsolaInstance
export default useLogger('nuxt:tailwindcss')
Loading

0 comments on commit 2ae28e5

Please sign in to comment.