How to Use Tailwind CSS in React and Vue.js - LogRocket Blog (2023)

Editor's Note: This guide to using Tailwind CSS in React and Vue.js was last updated on March 6, 2023 to reflect the latest CSS changes, add interactive code examples, and add sections on when and when not to use Tailwind CSS.

In the last years,CSS Libraries like Tailwind CSSThey have become indispensable for web development and offer developers a faster and more efficient way to design their web apps. Tailwind CSS, in particular, has gained great popularity among developers because of its utility-first approach, which allows for quick and easy prototyping.

In this tutorial, we'll look at when you want to use Tailwind CSS or not, how to integrate it with Vue.js and React, and how to optimize your Vue, React, and Tailwind CSS applications.

To follow this article you will needNode.js v10xor higher andHilo/npm v5.6or higher installed. You also need a basic knowledge ofJavaScript,ver,To react,CSS, Yatomic css architecture.

Skip further:

• What is Tailwind CSS?
  • When to use Tailwind CSS
  • When not to use Tailwind CSS
• By installing Tailwind CSS no Vue.js
• Agregando Tailwind CSS a React
• CSS Tailwind Optimization for Production

What is Tailwind CSS?

Tailwind CSS is a top-notch CSS library used to create custom themes. It does not provide preconfigured styles and components to build; Instead, it provides a set of unbiased building blocks known as helper/helper classes to help you design your components.

after himofficial documentation:

Tailwind CSS is a highly customizable, low-level CSS framework that provides all the building blocks you need to create custom layouts, without the hassle of struggling to replace idiosyncratic styles.

When to use Tailwind CSS

Tailwind CSS is ideal forrapid prototyping. With the Tailwind CSS utility classes, you can quickly rebuild your application's components without worrying about writing custom CSS or replacing existing styles. This allows you to focus on your site's design and functionality.

Tailwind CSS is also great for creatingconsistent projects. You can ensure that your design is consistent throughout your project without having to remember or look up the values ​​of different properties, as you can use the same class names throughout.

When not to use Tailwind CSS

While Tailwind CSS can be a great tool for rapid prototyping, there are times when you should avoid it. Here are some of them:

• Legacy projects: It can be difficult to migrate an existing project using a CSS framework or methodology other than Tailwind CSS. That means you'll have to rewrite a significant amount of HTML and CSS code, which might not be worth the effort or the risk of breaking something.
• Semantic HTML: Resemantic htmlYAccessibility, you might want to use non-descriptive class names likebg-blue-500otext-xland you may prefer to use more descriptive class names that reflect the element's content or purpose. there were numerousheated discussionsin Tailwind CSS semantics over the years
• Minimal Design – If you prefer a minimalist design with few styles and elements, Tailwind CSS can be too wordy and redundant.

Ultimately, using Tailwind CSS is a matter of personal preference and project needs.

By installing Tailwind CSS no Vue.js

When creating a new Vue application, there are many options to choose from. However, the most recommended method is to use Vite-poweredcreate-vuePackage. Regardless, if you use a different installation method, the above Tailwind CSS installation method should work for you as well.

First, create a new Vue 3 project with the following command:

create npm[Email protected]see tailwind

Running this command provides an interactive scaffolding experience where you can choose the packages your application needs. You can also save your settings as a preset for future projects. Then change directory to your project folder and install the required dependencies with the following command:

Instalar cd vue-tailwindnpm

Then start the development server in the newly created app's browser by running one of these commands:

npm ejecutar dev# ORyarn dev

Your app should now be running.http://localhost:5173by default and looks like this:

Then install Tailwind CSS and its peer dependencies with the following command:

npm install -D tailwindcss postcss Auto prefixer

To continue, we also need to run the following command to generate the necessary configuration files for Tailwind CSS to work:

npx tailwindcss init -p

The above command creates two new files,tailwind.config.jsYpostcss.config.js. These two files contain all the Tailwind CSS andPost-CSSdefault settings.

open thistailwind.config.jsArchive and update your content export so the whole file looks like this:

module.exports = { content: [./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], tema: { extend: {}, }, Plugins :[],};

Here we update the configuration file so that Tailwind CSS works within the default configurationindex.htmland it all.vue,.js,.ts,.jsx, Y.tsxfiles

Finally, open your project's default CSS file and paste the following code at the top of that file:

// src/assets/main.css@tailwind base;@tailwind components;@tailwindutilities;

Once you've completed all these steps, the Tailwind CSS should work perfectly with your Vue application. Paste the following code into the pattern filesrc/App.vueFile to test:

<template> <div class="p-4 m-auto border-2 round-lg bg-slate-800 text-white"> <h1 class="text-3xl font-bold">Hello world!</h1 > <p class="mt-5"> But if you go after the least of us with a clean soul, then no one will push you away, refusing to do your duty! Or the entertainment services themselves. </p> <button class="bg-indigo-600 hover:bg-indigo-800 mt-4 font-bold py-2 px-4 rounded" > Click me </button> </div >></ template >

You must see one with styleMaprendered as in the image below:

Following the steps highlighted above, I also created a CSS Vue and Tailwindinitial modelto make it easier for you to start creating new projects. You can alsointeract directly here.

Agregando Tailwind CSS a React

To install Tailwind CSS in React, create a new project withCreate React Applicationwith himnpx create-react-aplicativo react-tailwindDomain. Then change your working directory to your project folder and install Tailwind CSS and its peer dependencies with the following command:

cd respond-tailwindnpm install -D tailwindcss postcss Prefixador automático

To continue, runnpx tailwindcss init -pto generate the configuration files required by Tailwind CSS. This command creates two new files,tailwind.config.jsYpostcss.config.js, which include default Tailwind CSS and PostCSS settings.

Now open thetailwind.config.jsand update your content export so the file looks like this:

module.exports = { content: [./index.html", "./src/**/*.{js,ts,jsx,tsx}"], tema: { extend: {}, }, plugins: [ ],};

In the code above, we update the configuration file so that Tailwind works within the default configuration.index.htmland it all.js,.ts,.jsx, Y.tsxfiles

Finally, open the pattern filesrc/index.cssfile and paste the following code at the beginning of this file:

// src/assets/main.css@tailwind base;@tailwind components;@tailwindutilities;

Beautiful! Tailwind CSS should now work perfectly with our React app. To test it, paste the following code into the pattern filesrc/Application.jsFile:

function App() { return ( <div class="p-4 m-auto border-2 rounded-lg bg-slate-800 text-white"> <h1 class="text-3xl font-bold">Hello world ! </h1> <p class="mt-5">Let pain itself be soon followed by gain p> <button class="bg-indigo-600 hover:bg-indigo-800 mt- 4 py - 2 px - rounded 4"> Click Me </button> </div>);} export default app;

The above code is the same.MapComponent we created earlier in the Vue installation process and when you run your react app you should also see the same output:

CSS Tailwind Optimization for Production

By default, Tailwind CSS generates CSS code only for the helper classes you use in your project. To see this in action, we can trypackagingTo diesee tailwindApplication we created earlier bynpm-Run-Create. We should see output like the following image:

As shown above, the CSS file generated for theMapThe component we created earlier is1,66 KBonce compressed, which is quite reasonable. The React example also produces similar output using the CSS file at1,65 KB, after compressing it as shown below:

Although,Minimize seu CSSwith a tool likecssnanoin production is recommended for the lowest possible production configuration. To do this, we must first install cssnano with the following command:

npm install cssnano

Since we installed Tailwind CSS as a PostCSS plugin, we can conditionally addcssnanofor our production build by updating thepostcss.config.jsfile like this:

module.exports = { add-ons: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}), },};

This should make our generated CSS files smaller in production.

Diploma

In this article, we learned how to use Tailwind CSS in Vue and React. We also discussed how to optimize our application to generate the smallest possible packet size. You can read more in the documentation.Here.