From 674c675c0bba3b564c841729a274b91518b9e077 Mon Sep 17 00:00:00 2001 From: Kamal Wickramanayake Date: Sun, 5 Jul 2026 20:54:36 +0530 Subject: Added Tailwind CSS project README --- tailwindcss/02-vite/README | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 tailwindcss/02-vite/README (limited to 'tailwindcss/02-vite/README') diff --git a/tailwindcss/02-vite/README b/tailwindcss/02-vite/README new file mode 100644 index 0000000..75a9204 --- /dev/null +++ b/tailwindcss/02-vite/README @@ -0,0 +1,39 @@ +This project illustrates how Tailwind CSS can be used in a Vannila HTML + JavaScript setup. + +What Tailwind CSS features are used: + - Simple utility classes for setting padding, margin, colors + - Flex layout, Grid layout + - Breakpoints + - Themes (Styling dark and light themes) + - Layouts (Defining reusable components and applying styles at base layer that are applicable for html elements) + +Other important aspects of this project: + - JavaScript local storage is used to permanently store the set theme by the user. This is not always required and Tailwind CSS can automatically pick the theme set at OS level. + +Try this sample project: + + - Run command: npm install + - Run command: npm run dev + - Open the dev server URL in a web browser. + - Open this directory in your code editor like VSCode to make changes (You mostly update index.html file only to add HTML markup elements and apply Tailwind CSS utility classes to them.). + +How this project was created in the first place: + + Reference: Adding Tailwind CSS to a Vite project: https://tailwindcss.com/docs/installation/using-vite + + Commands: + npm create vite@latest myproject + - Select famework: Vanilla + - Select varient: JavaScript + - Select no immidiate installation and run + + Then, + cd myproject + npm install + npm install tailwindcss @tailwindcss/vite + # Now, add file vite.config.js which enables Tailwind CSS Vite plugin + npm run dev + + Open the dev server URL in a web browser. + Open the project (myproject) in your code editor like VSCode. + Edit index.html, src/style.css, src/main.js -- cgit v1.2.3