Attention à postcss8 qui peut être bloquant:
<§yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 §>

touch postcss.config.js

// dans postcss.config.js :
<§
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};
§>
// Puis ajouter la base dans un fichier index.css
<§
@tailwind base;
@tailwind components;
@tailwind utilities;
§>

// Ajouter index.css dans src/main.js
import './assets/styles/index.css';


Installation depuis VueJS

// Pour utiliser Tailwindcss sur Symfony, il faut ajouter la dépendance postcss depuis la base Symfony
<§yarn add postcss-loader@^5.0.0 --dev§>

// Et l'autoriser dans webpack.config.js
<§    // Enable postCSS loader
    .enablePostCssLoader()
§>
----------------------------------------------------------
// Suivre la recette de tailwindcss sur leur site https://tailwindcss.com/docs/guides/create-react-app
<§yarn add -D tailwindcss postcss autoprefixer§>


// Créer le tailwind.config.js
<§npx tailwindcss init -p§>

// Dans le tailwind.config.js, ajouter dans l'export:
<§
content: [
    "./src/**/*.{js,jsx,ts,tsx}",
],
  §>

// Dans src/index.css, ajouter
<§@tailwind base;
@tailwind components;
@tailwind utilities;
§>

// Vérifier la présence de l'import du fichier css dans le fichier d'entrée src/index.js
 import './index.css';

// Et voilà !!!
  


Installation depuis Create-react-app

// Ajouter sur un projet React
<§yarn add tailwindcss autoprefixer postcss -D§>

// Générer le fichier de config spécifique à Tailwindcss
<§npx tailwindcss init -p§>

// Ajouter le système de purge dans tailwind.config.js
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],


// Dans le fichier ./styles/globals.css
<§
@tailwind base;
@tailwind components;
@tailwind utilities;
§>

// Normalement, styles/globals.css est déjà présent dans le fichier _app.js

/!\ Attention : penser à redémarrer le serveur de dev pour activer et finir la mise en place de tailwindcss


Particularité de VSCode :
VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as @apply. You can disable this with the css.validate setting:

"css.validate": false
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

"editor.quickSuggestions": {
  "strings": true
}

Installation depuis Next.JS

// Créer un component


.input {
    @apply border shadow-inner py-2 px-3 text-gray-700 w-full;
}
.input:focus{
    @apply shadow-outline;
}

// Sur un composant, on peut ainsi utiliser la classe désirée :
<div class="input">
    yo !
</div>

// Attention à certaines propriétés qui doivent être isolées. ex:
.btn{
    @apply bg-blue-500 text-white px-4 py-2 rounded;
}
.btn:hover{
    @apply bg-blue-600;
}
.login-card{
    @apply bg-white shadow-lg max-w-lg;
}
@screen md{
    .login-card {
        @apply flex;
    }
}



Tailwindcss

Installation depuis VueJS

Installation depuis Create-react-app

Installation depuis Next.JS

Faire des components