Skip to content

Instantly share code, notes, and snippets.

@olygood
Created September 19, 2023 16:36
Show Gist options
  • Save olygood/15e19a5e76730ae8b88dba01905d8d3e to your computer and use it in GitHub Desktop.
Save olygood/15e19a5e76730ae8b88dba01905d8d3e to your computer and use it in GitHub Desktop.
tailwindcss
/ Install Tailwind CSS
/ Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
/ Configure your template paths
/ Add the paths to all of your template files in your tailwind.config.js file.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
// dans le fichier .css
@import 'tailwind base';
@import 'tailwind components';
@import 'tailwind utilities';
// exemple de projet
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment