From 99a714d5e89a6753ceb660b803bcd089c1f86d9d Mon Sep 17 00:00:00 2001
From: Ian Andwati <andwatiian@gmail.com>
Date: Wed, 26 Feb 2025 17:11:01 +0300
Subject: [PATCH] migrated old tailwindcss vue blog from medium

---
 content/posts/javascript-exporting-modules.md |   4 +
 content/posts/vuejs-tailwind.md               | 119 ++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 content/posts/vuejs-tailwind.md

diff --git a/content/posts/javascript-exporting-modules.md b/content/posts/javascript-exporting-modules.md
index 6edba96..4fde430 100644
--- a/content/posts/javascript-exporting-modules.md
+++ b/content/posts/javascript-exporting-modules.md
@@ -7,6 +7,10 @@ date = 2024-01-17
 tags = ["javascript", "node"]
 +++
 
+Modules are the building blocks of modern JavaScript applications, allowing for the encapsulation of code into reusable components. Two primary systems govern the exportation of these modules: export default in ES6 and module.exports in CommonJS.
+
+<!-- more -->
+
 Javascript is a popular programming language that can run both in the browser and on the server. However, different environments may have different ways of organizing and importing Javascript modules. In this article, we will compare two common methods of exporting and importing modules: **export default** and **module.exports**.
 
 
diff --git a/content/posts/vuejs-tailwind.md b/content/posts/vuejs-tailwind.md
new file mode 100644
index 0000000..4f7c8c6
--- /dev/null
+++ b/content/posts/vuejs-tailwind.md
@@ -0,0 +1,119 @@
++++
+title = "Configure Vue.js app With Tailwind CSS"
+description = "Tailwindcss in vuejs "
+author = "Ian Andwati"
+date = 2021-06-12
+[taxonomies]
+tags = ["javascript", "vuejs" , "tailwindcss"]
++++
+A guide on how to use [Tailwind CSS](https://tailwindcss.com/) in your Vue project.
+
+<!-- more -->
+
+>**Note**  
+> This article was originaly 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
+