Setup Tailwind CSS on Vue 3

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

How to setup Tailwind CSS on Vue

Create a Vue application named tailwind

vue create tailwind

After completing your Vue installation,

cd tailwind

Install Tailwind CSS

npm install tailwindcss

Create a file named postcss.config.js in your root directory

module.exports = {
plugins: [require(“tailwindcss”), require(“autoprefixer”)],
};

Create a file named app.css in assets/styles

@tailwind base;
@tailwind components;
@tailwind utilities;

In your App.vue add

<style src=”@/assets/styles/app.css”>

Add this code to your Home.vue to test Tailwind installation.

<div class=”px-8 container”>
<p class=”font-semibold”> Hello world </p>
</div>

To learn more about Tailwind CSS

https://tailwindcss.com/docs/installation