mirror of
https://github.com/andwati/andwati-nextgen.git
synced 2026-10-18 05:32:52 +00:00
andwati
63007a1c09
- Port adammaj.com layout, sidebar and 3D bookshelf from Chakra to Tailwind v4, matched to measured pixel values - Pages: About, Writing, Reading (bookshelf), Portfolio; content exported to markdown with YAML frontmatter, KaTeX math, callouts and YouTube embeds - Shiki (github-light) code highlighting via rehype-pretty-code - SEO: per-page metadata and canonicals, JSON-LD, generated OG images, sitemap, robots, RSS/JSON feeds, llms.txt - Umami analytics via PUBLIC_UMAMI_SCRIPT_URL / PUBLIC_UMAMI_WEBSITE_ID - Prettier + cspell for content, husky/lint-staged pre-commit hook - Multi-stage Dockerfile (Node 24, pnpm, standalone output) for Dokploy - Remove unused Chakra, emotion, framer-motion, posthog, next-seo and MDX deps
122 lines
3.2 KiB
Markdown
122 lines
3.2 KiB
Markdown
---
|
||
title: "Configure Vue.js app With Tailwind CSS"
|
||
description: "Tailwindcss in vuejs "
|
||
date: "2021-06-12"
|
||
tags: ["javascript", "vuejs", "tailwindcss"]
|
||
---
|
||
|
||
A guide on how to use [Tailwind CSS](https://tailwindcss.com/) in your Vue project.
|
||
|
||
> **Note**
|
||
> This article was originally published on my old medium blog. I moved it here for archival purposes.
|
||
|
||
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. It is an un-opinionated framework which means that it doesn't come with custom configurations like Bootstrap or Bulma(Yeah, I know, no one should tell you how to live your life).
|
||
|
||
Now let's get to the juicy part that brought us all here. I'll assume that we are using Vue 3 and the Vue CLI is already installed.
|
||
|
||
## Create a new Vue project
|
||
|
||
Open a terminal window and type the following commands to create a new Vue project in the current directory.
|
||
|
||
```sh
|
||
vue create vue-app
|
||
```
|
||
|
||
wait for the dependencies installation to finish then
|
||
|
||
```sh
|
||
cd vue-app
|
||
```
|
||
|
||
to change into the project directory.
|
||
|
||
## Install the Tailwind CSS and its peer dependencies as a dev dependency using npm
|
||
|
||
```sh
|
||
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
|
||
```
|
||
|
||
## Create your configuration files
|
||
|
||
Next, generate your `tailwind.config.js` and `postcss.config.js` files:
|
||
|
||
```sh
|
||
npx tailwindcss init -p
|
||
```
|
||
|
||
This command will create a minimal `tailwind.config.js` file at the root of your project:
|
||
|
||
```js
|
||
// tailwind.config.js
|
||
module.exports = {
|
||
purge: [],
|
||
darkMode: false, // or 'media' or 'class'
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
variants: {
|
||
extend: {},
|
||
},
|
||
plugins: [],
|
||
};
|
||
```
|
||
|
||
It will also create a `postcss.config.js` file that includes tailwindcss and autoprefixer already configured.Postcss is needed to process tailwind:
|
||
|
||
```js
|
||
// postcss.config.js
|
||
module.exports = {
|
||
plugins: {
|
||
tailwindcss: {},
|
||
autoprefixer: {},
|
||
},
|
||
};
|
||
```
|
||
|
||
## Configure Tailwind to remove unused styles in production
|
||
|
||
In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:
|
||
|
||
```js
|
||
// tailwind.config.js
|
||
module.exports = {
|
||
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||
darkMode: false, // or 'media' or 'class'
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
variants: {
|
||
extend: {},
|
||
},
|
||
plugins: [],
|
||
};
|
||
```
|
||
|
||
## Include Tailwind in your CSS
|
||
|
||
Navigate to `src/assets/css` and create a new `tailwind.css` file in the folder, and use the @tailwind directive to include Tailwind’s base, components, and utilities styles in the file.
|
||
|
||
```css
|
||
/* ./src/assets/css/tailwind.css */
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
```
|
||
|
||
Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.
|
||
|
||
## Import Tailwind into your Vue app
|
||
|
||
Finally, ensure your CSS file is being imported in your `./src/main.js` file:
|
||
|
||
```js
|
||
// src/main.js
|
||
import { createApp } from 'vue';
|
||
import App from './App.vue';
|
||
import './index.css';
|
||
|
||
createApp(App).mount('#app');
|
||
```
|
||
|
||
You're finished! Now when you run npm run dev, Tailwind CSS will be ready to use in your Vue app! You can now proceed to create awesome stuff
|