Dark and Light Themes with Tailwind CSS and Nuxt.js

Dark and light mode support has been a recent trend due to the impact on our eyesight caused by the time spent on devices. With  Tailwind CSS and the proper  Nuxt.js (Nuxt) modules, we can easily enable this feature, with the ability to customize each mode’s look and feel to your taste.

TL;DR

In short, you follow the simple steps below to enable dark/light mode with Tailwind CSS and the Nuxt color mode module:

• Install a Nuxt project using yarn create nuxt-app <project-name> and choose Tailwind CSS as a UI framework from the configuration selection. In case of an existing Nuxt project, run yarn add --dev @nuxtjs/tailwindcss and add the module @nuxtjs/tailwindcss to the list of buildModules in nuxt.config.js.
• Install tailwindcss-dark-mode and @nuxtjs/color-mode.
• Declare the use of tailwindcss-dark-mode as a plugin in the collection of plugins in tailwind.config.js. Do the same with @nuxtjs/color-mode by adding require('tailwindcss-dark-mode')() to the collection of plugins in nuxt.config.js.
• Declare the use of dark mode variants per CSS utilities in the variants field in tailwind.config.js.
• Start assigning dark mode styles for elements using generated classes with syntax ${dark-mode-variant}:${normal-generated-class-for-css-property}.

Too short to understand? Let’s go through slowly, shall we?

What Is Nuxt.js?

Nuxt.js — or Nuxt for short — is a server-side rendering (SSR) framework based on Vue.js, and it offers developers:

• Flexibility — With a single codebase, developers have three build options to output their application, such as universal (pure SSR), single-page application (SPA), and static sites.
• Organized code structure — A Nuxt app template comes with logical folder structures with a built-in router mechanism.
• Performance optimization — It has auto-code-splitting per page, keeping JavaScript bundled size relatively small for faster delivery.

Also, Nuxt is surrounded by a well-maintained ecosystem — the Nuxt community, which provides lots of practical modules, plugins, and support to simplify the development process.

#javascript #nuxtjs #css #tailwind css

What is GEEK

Buddha Community

Dark and Light Themes with Tailwind CSS and Nuxt.js

Dark and light mode support has been a recent trend due to the impact on our eyesight caused by the time spent on devices. With  Tailwind CSS and the proper  Nuxt.js (Nuxt) modules, we can easily enable this feature, with the ability to customize each mode’s look and feel to your taste.

TL;DR

In short, you follow the simple steps below to enable dark/light mode with Tailwind CSS and the Nuxt color mode module:

• Install a Nuxt project using yarn create nuxt-app <project-name> and choose Tailwind CSS as a UI framework from the configuration selection. In case of an existing Nuxt project, run yarn add --dev @nuxtjs/tailwindcss and add the module @nuxtjs/tailwindcss to the list of buildModules in nuxt.config.js.
• Install tailwindcss-dark-mode and @nuxtjs/color-mode.
• Declare the use of tailwindcss-dark-mode as a plugin in the collection of plugins in tailwind.config.js. Do the same with @nuxtjs/color-mode by adding require('tailwindcss-dark-mode')() to the collection of plugins in nuxt.config.js.
• Declare the use of dark mode variants per CSS utilities in the variants field in tailwind.config.js.
• Start assigning dark mode styles for elements using generated classes with syntax ${dark-mode-variant}:${normal-generated-class-for-css-property}.

Too short to understand? Let’s go through slowly, shall we?

What Is Nuxt.js?

Nuxt.js — or Nuxt for short — is a server-side rendering (SSR) framework based on Vue.js, and it offers developers:

• Flexibility — With a single codebase, developers have three build options to output their application, such as universal (pure SSR), single-page application (SPA), and static sites.
• Organized code structure — A Nuxt app template comes with logical folder structures with a built-in router mechanism.
• Performance optimization — It has auto-code-splitting per page, keeping JavaScript bundled size relatively small for faster delivery.

Also, Nuxt is surrounded by a well-maintained ecosystem — the Nuxt community, which provides lots of practical modules, plugins, and support to simplify the development process.

#javascript #nuxtjs #css #tailwind css

Easiest How to Light & Dark Mode toggle using Tailwind CSS & Alpine JS

This video shows you how to implement the toggle button to switch between light and dark mode for your website using Tailwind CSS & Alpine JS. The demo also includes “remembering” the users choice for the session.

GitHub Link: https://github.com/ThirusOfficial/light-dark-mode-tailwind-alpine

#Tailwind #Tailwind CSS #Alpine JS

#tailwind #tailwind css #alpine js #alpine

Tailwind Light & Dark Modes Admin Menus – Light & Dark Mode

Have a look at this simple CSS snippet featuring three useful admin menus with & without labels made using Tailwind that is perfect to integrate into your projects in light & dark mode versions. Find out more useful Tailwind tools & utilities here .

#css snippets #tailwind light #tailwind

How To Toggle Dark and Light Mode using jQuery

Hello Guys,

In this tutorial I will show you how to toggle between dark and light mode using jQuery.

As per the current trend of web development in many websites provides to user for reading select theme like dark mode and light mode or day mode and night mode of website and it’s very easy to implement in website.

In this just write some css code and java script for toggle dark mode and light mode website also you can store in local storage for save the state of user select theme like dark mode and light of website.

Read More : How To Toggle Dark and Light Mode using jQuery

https://websolutionstuff.com/post/how-to-toggle-dark-and-light-mode-using-jquery

---

Read Also : How Generate PDF From HTML View In Laravel

https://websolutionstuff.com/post/how-generate-pdf-from-html-view-in-laravel

#how to toggle dark and light mode using jquery #dark and light mode #toggle between light and dark mode #jquery #day and night mode #dark mode website

A Simple CV Generator Built with Nuxt.js and Tailwind CSS

CvFy

CvFy is a simple CV maker that makes CV creation faster and easier in both English and Spanish.

It’s built with NuxtJs and deployed in Netlify.

I usually enjoy styling from scratch but this time I’ve used TailwindCSS for the first time to see what all the fuss was about.

PDF creation is client-side only, so results may differ among browsers. Chrome desktop has the best print as the PDF created is exactly as the preview one.

It’s also a PWA so it can be used offline.

Demo: https://cvfy.netlify.app/

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Download Details:

Author: claudiabdm
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/claudiabdm/cvfy

Shirts and Gifts for You, Your Friends & Loved ☞ https://bit.ly/36PHvXY

#nuxt #tailwind #css #tailwindcss #vue