Ryän
Ryän
NNuxt
Created by KM on 4/26/2024 in #❓・help
@nuxt/eslint & ESLint Flat File Config
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
{
// languageOptions.parser: {
// parser: vueESLintParser,
// }
// extends: [
// 'eslint:recommended',
// '@nuxt/eslint-config',
// 'plugin:prettier/recommended',
// ],

plugins: {
prettier: prettierPlugin,
tailwindcss: eslintPluginTailwindCSS,
},
rules: {
...prettierPlugin.configs.recommended.rules,
...eslintConfigPrettier.rules,
...eslintPluginTailwindCSS.configs.recommended.rules,
// ...eslintPluginTailwindCSS.rules,
// semi: false,
// quotes: [2, 'single', { avoidEscape: true }],
},
},

{
ignores: [
'v1/*',
'v1/*/**',
'.nuxt/*',
'.nuxt/*/**',
'.vscode/*',
'.vscode/*/**',
'.output/*',
'.ouput/*/**',
'node_modules',
],
}
)
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
{
// languageOptions.parser: {
// parser: vueESLintParser,
// }
// extends: [
// 'eslint:recommended',
// '@nuxt/eslint-config',
// 'plugin:prettier/recommended',
// ],

plugins: {
prettier: prettierPlugin,
tailwindcss: eslintPluginTailwindCSS,
},
rules: {
...prettierPlugin.configs.recommended.rules,
...eslintConfigPrettier.rules,
...eslintPluginTailwindCSS.configs.recommended.rules,
// ...eslintPluginTailwindCSS.rules,
// semi: false,
// quotes: [2, 'single', { avoidEscape: true }],
},
},

{
ignores: [
'v1/*',
'v1/*/**',
'.nuxt/*',
'.nuxt/*/**',
'.vscode/*',
'.vscode/*/**',
'.output/*',
'.ouput/*/**',
'node_modules',
],
}
)
20 replies
NNuxt
Created by KM on 4/26/2024 in #❓・help
@nuxt/eslint & ESLint Flat File Config
try tailwindcss: eslintPluginTailwindCSS, ...eslintPluginTailwindCSS.configs.recommended.rules,
20 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
I tried using an older version of the Tailwind CSS module, version 6.11.3, and everything worked fine, including new class names in newly added files. I believe the issue is caused by the new First HMR feature introduced in version 6.12.0. p.s. I mistakenly mentioned the problematic version as 3.12.0. The correct version is 6.12.0, which is causing the issue.
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
I encountered this issue during local development. What other information can I provide to help you?
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
You can try starting the project with npm run dev, then adding a new page and navigating to the route.
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
Using the config you provided, the same error still occurs. Perhaps, as you mentioned, it is not detecting the newly added page.
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
let me try your config
export default {
theme: {},
plugins: [],
content: [
`/components/**/*.{vue,js,ts}`,
`/layouts/**/*.vue`,
`/pages/**/*.vue`,
`/composables/**/*.{js,ts}`,
`/plugins/**/*.{js,ts}`,
`/utils/**/*.{js,ts}`,
`/App.{js,ts,vue}`,
`/app.{js,ts,vue}`,
`/Error.{js,ts,vue}`,
`/error.{js,ts,vue}`,
`/app.config.{js,ts}`
]
}
export default {
theme: {},
plugins: [],
content: [
`/components/**/*.{vue,js,ts}`,
`/layouts/**/*.vue`,
`/pages/**/*.vue`,
`/composables/**/*.{js,ts}`,
`/plugins/**/*.{js,ts}`,
`/utils/**/*.{js,ts}`,
`/App.{js,ts,vue}`,
`/app.{js,ts,vue}`,
`/Error.{js,ts,vue}`,
`/error.{js,ts,vue}`,
`/app.config.{js,ts}`
]
}
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
I encountered this issue during local development and then tested and reproduced it on Stackblitz. If you add a new page it won't apply the style. Only to existing pages for some reason
40 replies
NNuxt
Created by Ryän on 6/18/2024 in #❓・help
Tailwind CSS module unexpected style apply
I cannot get it to work with either the default settings or the following settings.
export default {
content: [
'components/**/*.{vue,js,ts}',
'layouts/**/*.vue',
'pages/**/*.vue',
'composables/**/*.{js,ts}',
'plugins/**/*.{js,ts}',
'App.{js,ts,vue}',
'app.{js,ts,vue}',
'Error.{js,ts,vue}',
'error.{js,ts,vue}',
'content/**/*.md'
],
theme: {
extend: {}
},
plugins: []
}
export default {
content: [
'components/**/*.{vue,js,ts}',
'layouts/**/*.vue',
'pages/**/*.vue',
'composables/**/*.{js,ts}',
'plugins/**/*.{js,ts}',
'App.{js,ts,vue}',
'app.{js,ts,vue}',
'Error.{js,ts,vue}',
'error.{js,ts,vue}',
'content/**/*.md'
],
theme: {
extend: {}
},
plugins: []
}
40 replies