Add Tailwind CSS Rule to CSS Checker

When using Tailwind CSS, it's important to make sure your styles are correct. A CSS checker can help find issues, but because Tailwind uses utility classes and the @tailwind rule, the checker may not always recognize them. This makes it harder to validate your styles.

Our goal is to configure the CSS checker to work properly with Tailwind's unique syntax, allowing it to effectively validate your styles.

Approaches

There are two main approaches to configuring your CSS checker to work well with Tailwind CSS:

• Basic Stylelint Configuration
• Extended Configuration with Custom Rules

Basic Stylelint Configuration

This approach uses Stylelint, a popular CSS checker, with minimal configuration. It helps recognize Tailwind's custom @tailwind CSS rules and supports proper validation of your styles.

Follow these steps to set up Stylelint with Tailwind CSS:

Start by creating a new project directory and navigating into it:

mkdir tailwind-project
cd tailwind-project

Use npm to create a package.json file. This file will manage your project dependencies and scripts:

npm init -y

Install Tailwind CSS, Stylelint, PostCSS, and PostCSS CLI:

npm install tailwindcss stylelint stylelint-config-standard postcss postcss-cli

Generate the default Tailwind configuration file. This lets you change Tailwind's settings if needed.

npx tailwindcss init

Now, in the root of your project, create a .stylelintrc.json file to set up Stylelint. This file will tell Stylelint how to handle your CSS files.

{
    "extends": "stylelint-config-standard",
    "rules": {
        "at-rule-no-unknown": [
            true,
            {
                "ignoreAtRules": ["tailwind", "apply", "layer"]
            }
        ],
        "declaration-property-value-disallowed-list": {
            "font-weight": ["bold"]
        }
    }
}

After that, create a styles.css file in the root directory and add the following Tailwind directives:

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.button {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
}

.invalid-class {
    color: red;
    font-weight: bold;
}

After completing all the steps, your project folder should look like this:

In the package.json file, add a build script to compile your CSS:

"scripts": {
    "build": "postcss styles.css -o output.css"
}

Then, run the following command to compile your final CSS:

npm run build

Once Stylelint is configured, you can run it to check your CSS for any problems:

npx stylelint "styles.css"

Output

Extended Configuration with Custom Rules

This approach customizes Stylelint for projects using both Tailwind CSS and SCSS. It makes sure that Tailwind's special rules (like @apply and @layer) are recognized and that SCSS code is checked properly.

Follow the steps to set up stylelint with custom rules:

Install the necessary packages for SCSS support and better linting:

npm install stylelint-config-recommended-scss postcss-scss

Update the .stylelintrc.json file in the root of your project. This file will instruct Stylelint to ignore Tailwind-specific rules and properly handle SCSS:

{
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-recommended-scss"
    ],
    "rules": {
        "at-rule-no-unknown": null,
        "scss/at-rule-no-unknown": [
        true,
        {
            "ignoreAtRules": [
            "tailwind",
            "apply",
            "layer",
            "screen",
            "variants"
            ]
        }
        ],
        "declaration-property-value-disallowed-list": {
        "font-weight": ["bold"]
        }
    }
}

Now, create a cards.css file where you'll use Tailwind's @layer directive to define custom card styles:

/* cards.css */
@layer components {
    .card {
        @apply bg-white rounded-lg shadow-lg p-6;
    }

    .card-header {
        @apply text-xl font-semibold text-gray-900;
    }

    .card-body {
        @apply text-gray-700;
    }

    .card-footer {
        @apply flex justify-between items-center pt-4;
    }

    /* Invalid font-weight that should trigger an error */
    .invalid-class {
        font-weight: bold; /* This breaks the rule in .stylelintrc.json */
    }
}

After that, run Stylelint on your cards.css file to automatically fix any mistakes:

npx stylelint "cards.css" --fix

Finally, run Stylelint to check for any remaining style issues or mistakes:

npx stylelint "cards.css"

Output

Conclusion

Configuring a CSS checker to work with Tailwind CSS makes sure our styles are checked properly, even with Tailwind's special classes. By using the basic or advanced setup methods, we can easily configure Stylelint to check our Tailwind code and keep our styles clean and error-free.