diff options
Diffstat (limited to 'tailwindcss')
| -rw-r--r-- | tailwindcss/02-vite/README | 39 |
1 files changed, 39 insertions, 0 deletions
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 |