Tailwind CSS est un framework utilitaire agréable et puissant qui permet de créer rapidement des sites Web/applications. Dans ce guide, nous allons apprendre à utiliser une image d'arrière-plan personnalisée dans Tailwind CSS avec prise en charge du mode sombre.

Commençons!

• Configuration d'une application Next.js et Tailwind CSS
• Configuration de Tailwind CSS
• Création du composant Post
• Affichage du composant Post

Configuration d'une application Next.js et Tailwind CSS

Dans cet article, j'utiliserai Next.js pour démarrer une nouvelle application; n'hésitez pas à utiliser le framework de votre choix, gardez simplement à l'esprit que ce que vous apprendrez ici s'appliquera de la même façon.

Commencez par ouvrir votre interface de ligne de commande (CLI) et exécutez cette commande:

 npx create-next-app next-tailwindcss-app

Une nouvelle application Next.js devrait ensuite être créée. Maintenant, accédez à la racine du projet et installez Tailwind CSS et ses dépendances.

 yarn add -D tailwindcss postcss autoprefixer
# npm install -D tailwindcss postcss autoprefixer

Ensuite, créez vos fichiers de configuration pour Tailwind et PostCSS. Pour cela, vous devez exécuter la commande suivante dans votre CLI:

 npx tailwindcss init -p

Cela créera deux fichiers de configuration: un pour Tailwind CSS et un autre pour PostCSS. Le but de ces configurations est d'étendre la puissance de Tailwind pour répondre à nos besoins.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Nous avons maintenant terminé la configuration initiale. Cependant, nous n'avons pas encore dit à Next.js que nous allons utiliser Tailwind CSS pour styliser notre application. Pour ce faire, nous devons importer Tailwind dans notre fichier _app.js.

// pages/_app.jsimport "tailwindcss/tailwind.css"
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Avec cette étape, nous pouvons maintenant utiliser Tailwind pour styliser notre application.

Comme vous pouvez le voir, nous avons effectué plusieurs configurations pour que nos applications Next.js et Tailwind soient opérationnelles. Mais, heureusement, il existe un moyen plus rapide d'obtenir tout cela avec une seule commande.

hallucinant :)

 npm create next-app --example with-tailwindcss next-tailwindcss-app

Cette commande utilisera les exemples officiels Next.js pour créer une nouvelle application avec Tailwind CSS prête à l'emploi.

Une fois cela en place, nous pouvons maintenant mettre à jour le fichier de configuration Tailwind pour activer le mode sombre et ajouter également nos images personnalisées.

Configuration de Tailwind CSS

Tailwind CSS rend tout plus facile. Tout ce que nous avons à faire pour activer le mode sombre est d'ajouter class (ou media) comme valeur à la propriété darkMode.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: "class",  theme: {
    extend: {      backgroundImage: {        "nature-light": "url('/nature-light.jpg')",        "nature-dark": "url('/nature-dark.jpg')",      },
    },
  },
  variants: {
    extend: {      backgroundImage: ["dark"],
    },
  },
  plugins: [],
}

En ce qui concerne les images d'arrière-plan, nous informons Tailwind d'utiliser "nature-light" dans le thème clair et de passer à "nature-dark" en mode sombre.

Par défaut, seules les variantes réactives sont générées pour les utilitaires d'image d'arrière-plan. Nous devons ajouter dark à la variante backgroundImage pour prendre en charge le mode sombre.

Oups! J'oublie presque de mentionner que nous devons ajouter les images dans le dossier public afin d'utiliser les ressources (comme vous pouvez le deviner) dans notre application.

Vous pouvez télécharger les images ici :

• Image 1 par Yura Tsipak
• Image 2 par Annie Spratt

Passons à autre chose et créons nos composants dans la section suivante.

Création du composant Post

// components/Post.js
import { useState } from "react"

const LIGHT_THEME = "light"
const DARK_THEME = "dark"

export default function Post() {
  const [theme, setTheme] = useState(LIGHT_THEME)
  const switchTheme = () => {
    if (!document.documentElement.classList.contains(DARK_THEME)) {
      document.documentElement.classList.add(DARK_THEME)
      setTheme(DARK_THEME)
    } else {
      document.documentElement.classList.remove(DARK_THEME)
      setTheme(LIGHT_THEME)
    }
  }

  return (
    <div className="bg-white dark:bg-gray-800 w-96 pb-4 rounded-3xl shadow-lg overflow-hidden">
      <div className="bg-nature-light dark:bg-nature-dark bg-cover object-cover bg-center h-56 w-full" />
      <div className="p-4 text-left">
        <h3 className="text-xl text-black dark:text-white font-semibold">
          My First Post
        </h3>
        <p className="mt-2 mb-10 text-gray-600 dark:text-gray-300">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua...
        </p>
        <button
          onClick={switchTheme}
          className="float-right px-6 py-2.5 bg-gray-800 dark:bg-white text-gray-200 dark:text-gray-800 rounded-full capitalize"
        >
          {theme} Mode
        </button>
      </div>
    </div>
  )
}

Ici, nous avons un simple composant React avec deux choses principales à souligner:

1. La fonction switchTheme nous permet de changer le thème. Notez qu'ici, rien n'est persisté dans le stockage local ou l'API de contexte car ce n'est pas l'objet de ce tutoriel; n'hésitez pas à pousser les choses au niveau supérieur et à ajouter ces fonctionnalités.
2. Le préfixe dark est utilisé par Tailwind pour basculer entre le thème clair et sombre. Toutes les classes préfixées par dark: seront utilisées uniquement en mode sombre. L'image d'arrière-plan du thème clair sera bg-nature-light et celle du mode sombre sera bg-nature-dark.

Cela semble magique? Eh bien, c'est le cas, car Tailwind gère presque tout pour nous.

Avec cela en place, nous pouvons passer à l'étape finale et importer ce composant dans le fichier index.js.

Affichage du composant Post

// pages/index.js
import Post from "../components/Post"

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center w-full min-h-screen py-2 flex-1 px-20 text-center bg-gray-100">
      <Post />
    </main>
  )
}

Nous sommes maintenant prêts à tester notre application Next.js dans le navigateur.

Pour ce faire, exécutez la commande suivante à la racine du projet:

j'espère que ça va marcher :)

 yarn dev
 # npm run dev

Visitons le navigateur http://localhost:3000

Et c'est tout! Notre application a l'air bien!

Vous pouvez trouver le projet terminé sur ce repo Github.

Merci d'avoir lu!