Skip to content

Warn if the path to tailwindConfig or tailwindStylesheet is invalid #363

@mrleblanc101

Description

@mrleblanc101

What version of prettier-plugin-tailwindcss are you using?

0.6.11

What version of Tailwind CSS are you using?

4.1.5

What version of Node.js are you using?

v20.17.0

What package manager are you using?

npm

What operating system are you using?

macOS

Reproduction URL

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/README.md

Describe your issue

Just lost quite a bit of time trying to figure out why my sorting wasn't correct.
Turn out the path inside tailwindConfig or tailwindStylesheet wasn't correct.
The README says the path is relative to .prettierrc, but if you don't put a valid path, the plugin will work poperly but show different errors when running npm run lint

package.jon

"lint": "eslint --ext .js,.vue ./resources/js"

eslint.config.js

import pluginVue from 'eslint-plugin-vue';
import globals from 'globals';
import eslintConfigPrettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
    ...pluginVue.configs['flat/recommended'],
    {
        plugins: {
            prettier: prettierPlugin,
        },
        rules: {
            ...prettierPlugin.configs.recommended.rules,
            ...eslintConfigPrettier.rules,
            ...eslintPluginPrettierRecommended.rules,
            'no-console': 'warn',
            'vue/no-v-html': 'off',
            'vue/multi-word-component-names': 'off',
            'nuxt/no-cjs-in-config': 'off',
            'vue/html-button-has-type': 'error',
            'object-shorthand': ['error', 'always'],
            'no-unused-vars': 'warn',
            'vue/no-unused-components': 'warn',
            'vue/padding-line-between-blocks': ['error', 'always'],
            'vue/no-multiple-template-root': 'off',
            'vue/prop-name-casing': 'off',
            'no-irregular-whitespace': 'off',
            'vue/one-component-per-file': 'off',
            'vue/define-macros-order': [
                'error',
                {
                    order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'],
                    defineExposeLast: true,
                },
            ],
        },
        languageOptions: {
            sourceType: 'module',
            globals: {
                ...globals.browser,
                ...globals.node,
                axios: true,
                route: true,
                globalThis: true,
                CookieConsent: true,
            },
        },
    },
];

.prettierrc:

{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "plugins": ["prettier-plugin-tailwindcss"],
    "tailwindStylesheet": "./resources/css/app.css"
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions