Working with a component library to build your custom UI can be complicated, especially when you want to integrate with other tools, such as TailwindCSS. …

In this post, we will see how to use CSS function `color-mix()` with CSS variables to generate a custom palette for our Nuxt application efficiently with TailwindCSS. Prerequisites It would be best if you had your Nuxt application set up by using the following command: npx nuxi init tailwindcss-color-mix Selecting TailwindCSS…

In this tutorial, we will learn how to position an element using the inset logical property. We will also learn how the inset logical property differs from the physical properties like top, bottom, left, and right. Understanding the position property The browser uses the position property to determine how to position an element in…

In this post, we will see how to use TailwindCSS with the Nuxt application efficiently with the help of the official Nuxt module for TailwindCSS. …

Let’s explore how we can add a tooltip to your Vue component using directive and CSS. — In the previous post, we explored how to build an accessible tooltip component in Vue. However, creating an element for a simple tooltip can be overkill. Hence, in the post, we will explore another approach to enhancing a component with a tooltip, using custom directives and CSS. What is a Vue directive? While a Vue…

Let’s explore how we can build a fully accessible Vue component to display a tooltip from scratch using CSS. — Tooltip is an informative and short message which appears only when there is user interaction with an element on the UI of an application. As a commonly used feature, it aims to provide hints or additional descriptive information for a particular part. For interactive elements like buttons, especially icon buttons…

Let’s learn to generate complex types with keyof and typeof as an efficient way of coding — In this article, we will learn how to extract and declare constant types by combining the type operators typeof, keyof and enums to benefit your codebase. Prerequisites For a better coding experience, you should install TypeScript in your IDE, such as VSCode. It will provide you with essential features such as…

Tips for planning and testing your Vue component with Vitest and Vue Test Utils — This post will explore tips and practices we can use to simplify our Vue component testing with tools like Vitest. Before we start, let’s look at how to quickly set up Vitest for our project. Setting up Vitest Vitest is the fast unit testing framework powered by Vite and for Vite-powered projects. It…

How to build an accessible text field component in React and TypeScript — Writing accessible components, as many developers believe, is a challenging task. However, with the appropriate structure and component design, you can achieve accessibility quickly, starting from the essential ones. In this article, we are going to implement a TextField component using React and TypeScript, which has the following features: