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 like
bg-blue-500
otext-xl
and 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:5173
by 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.js
Ypostcss.config.js
. These two files contain all the Tailwind CSS andPost-CSSdefault settings.
open thistailwind.config.js
Archive 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.html
and it all.vue
,.js
,.ts
,.jsx
, Y.tsx
files
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.vue
File 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 styleMap
rendered 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-tailwind
Domain. 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 -p
to generate the configuration files required by Tailwind CSS. This command creates two new files,tailwind.config.js
Ypostcss.config.js
, which include default Tailwind CSS and PostCSS settings.
Now open thetailwind.config.js
and 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.html
and it all.js
,.ts
,.jsx
, Y.tsx
files
Finally, open the pattern filesrc/index.css
file 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.js
File:
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.Map
Component 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 tailwind
Application we created earlier bynpm-Run-Create
. We should see output like the following image:
As shown above, the CSS file generated for theMap
The component we created earlier is1,66 KB
once 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 addcssnano
for our production build by updating thepostcss.config.js
file 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.
Break through the noise of traditional React bug reports with LogRocket
log rocketis a React analytics solution that protects you from hundreds of false positive bug alerts on just a few really important things. LogRocket reports on the most serious bugs and UX issues that really affect users in their React apps.log rocketautomatically adds client-side errors, response error thresholds, redux status, slow component load times, JS exceptions, front-end performance metrics, and user interactions. LogRocket uses machine learning to alert you to the most serious issues that affect the most users and gives you the context you need to fix them.
Focus on the React bugs that matter:Try LogRocket today.
Try out your Vue apps as a user
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds, of mutations during a user session. If you are interested in monitoring and tracking Vue mutations for all your users in production,Try LogRocket.https://logrocket.com/regístrate/
log rocketIt's like a DVR for web and mobile apps that records literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance issues, and more. Rather than guessing why issues occur, you can add and report what state your application was in when a problem occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, providing context on what caused an error and what state the application was in when an issue occurred.
Modernize the way you debug your Vue apps -Start monitoring for free.