Crafting Clean Code with Tailwind CSS and Vue Composition API

In the ever-evolving landscape of web development, writing clean and maintainable code is paramount. This post will guide you through a method that combines the power of Tailwind CSS with Vue's Composition API and the Single File Component (SFC) syntax. This approach not only enhances code readability but also simplifies the process of styling Vue components.

Project setup

Before diving into the coding process, make sure to set up your project with Tailwind CSS and Vue. We can use npm or yarn to install the necessary packages, follow these steps to set your project:

Tailwind setup with Vue using Vite

Leveraging Composition API and SFC Syntax

To take advantage of Vue's Composition API and SFC syntax, create a component using the <script setup> syntax. This modern approach simplifies the component structure and promotes cleaner code organization.

<!-- src/components/TailwindClasses.vue -->
<template>
  <div class="bg-blue-500 text-white text-xl font-bold flex items-center justify-center px-4 py-8">
    {{ message }}
  </div>
</template>

<script setup>
const message = ref('Tailwind is messy')
</script>

Although, the div has multiple Tailwind CSS classes directly applied, which can become messy and hard to manage as the component grows. Consider using a more modular approach with utility classes stored in variables.

Applying Tailwind Classes Dynamically

Lets suppose we have to set a different color by props. It will even more messy trying to handle variants on template.

But we can dynamically apply Tailwind CSS classes to our component by utilizing the array variables within the template. This approach enhances maintainability and allows for easy modifications.

<!-- src/components/MyComponent.vue -->
<template>
  <div :class="computedClasses">
    {{ message }}
  </div>
</template>

<script setup>
// SECTION -  Setup and component logic
import { ref, computed, defineProps } from "vue";

const message = ref("Tailwind can be clean!");

/***
 * (optional) We will use props to pass in the color now,
 * actually this can use any other data/method to set
 * variant classes
 */
const props = defineProps({
  color: {
    type: String,
    default: "blue",
  },
});

// SECTION -  Style classes

// Combine classes using computed
const computedClasses = computed(() => {
  // Defining colors we want
  const colors = {
    blue: ["bg-blue-500", "text-white"],
    red: ["bg-red-500", "text-white"],
    yellow: ["bg-yellow-500", "text-black"],
  };

  return [
    colors[props.color],
    "text-xl font-bold",
    "px-4 py-8",
    "flex items-center justify-center",
  ];
});
</script>

Separating component logic and style classes into distinct sections with comments makes it easier for developers to understand and maintain the code, promoting a clean and modular structure.

The use of clear annotations, such as "SECTION" is a great practice to enhance code organization and readability.
You can use a extension like Comment Anchors or Better Comments to highlight sections on VSCode.

Conclusion

By combining Tailwind CSS, Vue's Composition API, and the SFC syntax, you can write clean, modular, and maintainable code. Integrating Tailwind CSS with Vue using the Composition API and SFC syntax is a powerful combination. It provides a clear and concise way to handle styles while maintaining a high level of flexibility and readability. This approach aligns well with the principles of clean code, making it a recommended choice for Vue developers.

You can check this example on CodeSandbox