Nuxt.js
TailwindCSS
CSS

Tema Escuro/Claro com TailwindCss e Nuxt

Mar 25, 2021
Tema Escuro/Claro com TailwindCss e Nuxt

Cada vez mais é comum vermos o uso do tema escuro em aplicativos que usamos no dia a dia, neste artigo veremos como adicionar o tema escuro numa aplicação construída em Nuxt e TailwindCSS.

O que é TailwindCSS?

Tailwind é um framework de CSS que oferece um catálogo de classes e ferramentas CSS através da abordagem ‘utility-first’, por exemplo:

tailwind_btn.jpg

Para criarmos esse botão é necessário apenas declararmos as seguintes classes

<button class="py-1 px-2 bg-green-500 rounded shadow-md text-white uppercase">
Button
</button>

O que é Nuxt.js?

Nuxt é um framework JavaScript baseado em Vue.js que torna o desenvolvimento web mais simples e prático

  • Configurando um projeto Nuxt com TailwindCSS

    Lembrando que é necessário ter o node.js instalado

    npx create-nuxt-app <nome-do-projeto>
    
  • Para usar o Tailwind é só selecionar na lista do Nuxt de UI framwork 1Capturar.PNG

  • Usando o TailwindCSS como tema do projeto

    O Nuxt vai automaticamente adicionar dois arquivos no diretório do projeto

    • ~/assets/css/tailwind.css - que incluie os stilos basicos do tailwind
    • ~/tailwind.config.js - arquivo de configuração para customizações adicional:
    //tailwind.config.js
    module.exports = {
      theme: {},
      variants: {},
      plugins: [],
      purge: []
    }
    

    Vamos criar o arquivo tailwind.css no caminho ~/assets/css/tailwind.css e adicionar o seguintes comandos dentro

    /*~/assets/css/tailwind.css*/
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

    e criar o arquivo tailwind.config.js com o seguinte comando

    npx tailwind init
    

    vamos adicionar uma paleta redudiza de cores

    //tailwind.config.js
    module.export = {
      purge: [],
      darkMode: false,
      theme: {
        extend: {
          colors: {
            white: '#ffffff',
            black: '#000000',
            blue: '#148DD9',
            red: '#e80c00',
            gray: '#a6a6a6'
          }
        }
      },
      variants: {
        extend: {}
      },
      plugins: []
    }
    

    adicione o comando abaixo para que o tailwind encontre o caminho padrão:

    //nuxt.config.js
    tailwindcss: {
      cssPath: '~/assets/css/tailwind.css'
    }
    

    vamos subir a aplicação com o comando:

    npm run dev
    

    para aplicar a cor cinza de fundo é so adicionar a classe bg-gray

    <template>
      <div class="bg-gray">
        <Nuxt />
      </div>
    </template>
    

    Como resultado:
    Capt222urar.PNG

  • Dark/Light com o módulo @nuxtjs/color-mode

    Primeiro vamos instalar o módulo @nuxtjs/color-mode rodando o seguinte comando dentro do projeto:

    npm install --save-dev @nuxtjs/color-mode
    

    Adicione o módulo em nuxt.config.js dentro de buildModules:

    /* ~/nuxt.config.js*/
    buildModules: [
     '@nuxtjs/tailwindcss', '@nuxtjs/color-mode'
    ]
    

    Adicione no arquivo default.vue o seguinte estilo:

    <!--layouts/default.vue-->
    <style>
     .dark-mode {
       @apply text-white bg-black;
     }
     .light-mode {
       @apply text-black bg-white;
     }
    

    Crie um componente botão para trocar o estado entre escuro e claro

    <!--  ~/components/ColorMode.vue -->
    <template>
     <button class="btn border border-white capitalize"
       @click="changeMode">
         {{ btnLabel }}
     </button>
    </template>
    
    <script>
      export default {
        computed: {
          btnLabel() {
            return this.$colorMode.preference === 'light' ? 'dark' : 'light'
          }
        },
        methods: {
          changeMode() {
            this.$colorMode.preference = this.$colorMode.preference === 'light' ? 'dark' : 'light'
          }
        }
      }
     </script>
    

    No arquivo default.vue comente a tag <Nuxt /> e insira o novo componente ColorMode e faça um teste clicando no botão.

  • Instalando o modulo dark-mode do tailwindcss no nuxt

    Instale o módulo do tema escuro para o tailwind

    npm install --save-dev tailwindcss-dark-mode
    

    Adicionando os tipos de dark que o tailwind pode adicionar à nossa aplicação

    // ~/tailwind.config.js
    module.export = {
      //...
      variants: {
        backgroundColor: [
          'dark', 'dark-hover', 'dark-group-hover',
        'dark-even', 'dark-odd', 'hover',
        'responsive'
        ],
        borderColor: [
          'dark', 'dark-focus',
        'dark-focus-within',
        'hover', 'responsive'
        ],
        textColor: [
          'dark','dark-hover','dark-active',
          'hover', 'responsive'
        ],
      }
    }
    

    Em tailwind.config.js adicione o darkSelector

    module.export = {
        theme: {
          darkSelector: '.dark-mode'
        }
    }
    

    E abaixo de variants adicione:

    module.export = {
      //...
      plugins: [require('tailwindcss-dark-mode')()],//dark mode
      purge: {
        enabled: process.env.NODE_ENV === "prodction",
        content: [
          'components/**/*.vue", "layouts/**/*.vue',
          'pages/**/*.vue", "plugins/**/*.js", "nuxt.config.js'
        ]
      }
    }
    
  • Por último vamos testar o funcionamento do tema

    <template>
    	<div class="container bg-white text-black dark:bg-black dark:text-white">
    	    <div class="m-48 justify-center text-center">
    	      <colormode></colormode>
    	      <h1 class="title text-xl font-bold text-red dark:text-blue">
    	        <p>Clique no botão para mudar o tema :)</p>
    	      </h1>
    	    </div>
    	  </div>
    </template>
    

    Importe o componente no script

    <script>
    import colormode from "~/components/ColorMode";
    export default {
      components: { colormode },
    }
    </script>
    

Finalizamos o nosso componente para alternar entre tema escuro e claro com tailwind e nuxt
tema_escuro_claro.png

O código completo do exemplo pode ser encontrado no repositório: https://github.com/Samanosukeh/tema-claro-escuro-tailwind-nuxt