March 2021
🔨 TaildwindCSS framework. Overview and showcase website. From udemy: TaildwindCSS de A à Z.
Demo on Github page:
- tailwindcss: A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Create a CSS file if you don't already have one, and use the @tailwind directive to inject Tailwind's base, components, and utilities styles:
/* ex: ./css/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;package.json
"scripts": {
"build": "tailwindcss build ./css/input.css -o ./css/output.css"
},It will create ./css/output.css.
Import the generated file in HTML.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TailwindCSS</title>
<link rel="stylesheet" href="./css/output.css" />
</head>npm i postcss-cli
postcss.config.js
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
}; "scripts": {
"build": "postcss build ./css/input.css -o ./css/output.css",
"watch": "postcss build ./css/input.css -o ./css/output.css --watch"
},To avoid to rebuild output.css (when changing input.css), use npm run watch.
input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* custom css */
body {
background: lightblue!important;
}
/* custom class using utility class from TW */
.square {
@apply w-20 h-20;
background: rgb(13, 136, 29);
}tailwind.config.js
Extend classes:
module.exports = {
theme: {
extend: {
spacing: {
verywide: "1500px",
},
},
},
};Replace ALL classes (here the colors provided by Tailwind.css will be replaced):
module.exports = {
theme: {
colors: {
customColors: "#000",
},
},
};npm run build (watch mode doesn't work)
Now class w-verywide can be use in html pages.
- cross-env: Run scripts that set and use environment variables across platforms
npm i cross-env
package.json
"scripts": {
"production": "cross-env NODE_ENV=production postcss ./css/input.css -o ./css/output.css"
},tailwind.config.js
module.exports = {
purge: ["./*.html", "./**/*.html"],
theme: {
//...
},
};- Padding / Margin
- Width / Height
- Font size
- Text align
- Colors
- Font weight
- Font Family
- Font Style
- Letter Spacing
- Row height
- List Style Type
- Text opacity
- Texte-Décoration
- Text Transform
- Text Overflow / Break Words
- Background-color
- Background-Opacity
- Gradients
- Image/Repeat/Size/Attachment/Position
- Border Radius
- Border Width
- Border Color
- Border Opacity
- Border Style
- Divide Width/Color/Opacity/Style
- Ring Width/Color/Opacity/Style
- Button
- Media queries / min-width
- Custom classes
- Dark mode
- Variants / Adding pseudo classes
- Purge CSS