Utilisation de Tailwind avec Vue.js

Cet article explique comment configurer Tailwind pour une utilisation dans un projet Vue CLI 3

Vent arrièreest un framework CSS assez cool.

Dans cet article, je vais vous montrer comment utiliser Tailwind (v1.0.5) sur une application Vue.

C'est 4 étapes simples:

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

Installez Tailwind

La première étape consiste à installer Tailwind, en utilisant npm ou yarn:

# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev

Créer un fichier de configuration

Ensuite, utilisez la commande Tailwind fournie pour créer un fichier de configuration.

./node_modules/.bin/tailwind init tailwind.js

Cela créera untailwind.jsà la racine de votre projet, en ajoutant la configuration de base Tailwind. Le fichier est très long, et je ne le collerai pas ici, mais il contient beaucoup de préréglages qui seront très utiles plus tard.

Configurer PostCSS

Vous devez maintenant modifier lePostCSSconfiguration pour vous assurer que Tailwind s'exécute. Ajouter:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

à tonpostcss.config.js. Créez-en un s'il n'existe pas.

Remarque: si vous définissez Vue CLI pour stocker la configuration danspackage.json, assurez-vous qu'aucune configuration PostCSS ne se trouve dans ce fichier. Par défaut, Vue CLI ajoute ces lignes:

  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

retirez-les, ou lapostcss.config.jsle fichier ne sera pas lu.

Créer un fichier CSS

Créez maintenant un fichier CSS danssrc/assets/css/tailwind.csset ajouter

@tailwind base;
@tailwind components;
@tailwind utilities;

Importez le fichier dans votre application Vue

Importez le vent arrière dans main.js:

import '@/assets/css/tailwind.css'

(@en vue pointe verssrc/)

C'est tout! Maintenant, redémarrez votre projet Vue CLI et tout devrait fonctionner correctement.

Le tester fonctionne bien

Vous ne remarquerez rien à moins d'ajouter des classes spécifiques à Tailwind.

Essayez par exemple d'ajouter ce HTML dans l'un de vos modèles:

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

Cela devrait créer une boîte colorée.

Téléchargez mon gratuitManuel de Vue