Introduction

The Tailwind Dark Mode Theme Switcher is a basic demonstration project that showcases how to implement a theme switching functionality using Tailwind CSS. This project is particularly useful for developers looking to add a dark mode feature or multiple theme options to their web applications. It combines the power of Tailwind CSS with JavaScript to create a smooth and efficient theme switching experience.

Main Features

1. Theme switching functionality using Tailwind CSS
2. Dark mode implementation
3. Local storage integration for theme persistence
4. Built with Eleventy static site generator
5. Optimized for production using Tailwind's purge feature
6. Responsive design
7. Easy to customize and extend

Installation Steps

1. Clone the repository:

   git clone https://github.com/huphtur/tailwind-theme-switcher
   cd tailwind-theme-switcher
   

2. Install dependencies: Using npm:

   npm install
   

   Or using Yarn:

   yarn
   

3. Start the development server: Using npm:

   npm run serve
   

   Or using Yarn:

   yarn serve
   

4. Open your browser and visit http://localhost:8080 to see the project running.

Usage Instructions

1. Customizing Themes:

   • Open tailwind.config.js to modify or add new theme configurations.
   • Adjust the CSS classes in the HTML files to apply different styles for each theme.

2. Switching Themes:

   • The theme switcher is implemented in JavaScript. Locate the relevant script in the project files to customize the switching logic.

3. Adding New Pages:

   • Use Eleventy to add new pages to your project. Place new .html or .liquid files in the appropriate directories.

4. Modifying Styles:

   • Tailwind classes are used for styling. Modify these classes in your HTML files to change the appearance of elements.

5. Building for Production: To create an optimized version of your CSS, run: Using npm:

   npm run build
   

   Or using Yarn:

   yarn build
   

   The optimized CSS will be available in ./_site/styles.css.

Important Notes

1. This project uses Tailwind CSS, so familiarity with Tailwind's utility-first approach is beneficial.

2. The theme switching logic relies on JavaScript and local storage. Ensure JavaScript is enabled in the browser for full functionality.

3. The project is built with Eleventy, a static site generator. Understanding Eleventy's basics can help with further customization.

4. When adding new styles or components, remember to use Tailwind's utility classes to maintain consistency with the theming system.

5. The local storage feature allows the selected theme to persist across page reloads and browser sessions.

6. For production builds, Tailwind's purge feature is used to remove unused styles, resulting in a significantly smaller CSS file.

7. The project structure is designed to be simple and easy to understand, making it a good starting point for more complex implementations.

8. While primarily demonstrating dark mode, this setup can be extended to support multiple theme options.

9. Regularly update Tailwind CSS and other dependencies to ensure you have the latest features and security patches.

10. This project is open-source, so feel free to fork and modify it to suit your specific needs or contribute improvements back to the original repository.