I. What is Tailwind CSS?
TailwindCSS
là một CSS framework được tạo ra bởi
II. Why Tailwind CSS?
Tại sao lại sử dụng Tailwind CSS? Tailwind CSS có những ưu điểm gì mà các framework khác không có? Tailwind CSS có những ưu điểm sau:
-
Tailwind CSS là một framework hướng tới việc xây dựng các giao diện người dùng nhanh hơn, dễ dàng hơn và có thể tùy biến được nhiều hơn.
-
Tailwind CSS kết hợp với
Node.js Compilerđể tạo ra các class CSS. Tailwind CSS không cung cấp các component như các framework khác nhưng nó cung cấp các class CSS để chúng ta có thể tạo ra các component của riêng mình. -
Tailwind CSS là một framework có tính tùy biến cực kỳ cao, chúng ta có thể tùy biến mọi thứ trong Tailwind CSS. từ màu sắc, font chữ, kích thước, độ rộng, độ cao, … của các class CSS.
-
Sử dụng
Node.js Compilerđể quan sát sự thay đổi trên file nên Tailwind CSS tương thích tốt các class của mình với các ngôn ngữ khác nhưCSS,SASS,LESS,Stylus, …
III. How to use Tailwind CSS?
Với Tailwind chúng ta có thể sử dụng nhiều các khác nhau để cài đặt vào dự án của mình, dưới đây mình xin giới thiệu một số cách phổ biển nhất để cài đặt Tailwind CSS vào dự án của mình. đọc thêm tại Tailwind CSS Installation
1. Install Tailwind CSS with CDN
Tailwind hổ trợ CDN và là một cách cài đặt khá cơ bản cho các bạn bắt đầu sử dụng Tailwind CSS. Các bạn chỉ cần thêm đoạn code sau vào file HTML của mình là có thể sử dụng Tailwind CSS được rồi. Ngoài ra Tailwind CDN còn hổ trợ plugins và configs cho các bạn sử dụng luôn.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="HTML Description" />
<!-- CDN -->
@@@ <script src="https://cdn.tailwindcss.com"></script>
<!-- Plugins -->
@@@ <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<!-- Configs -->
@@@ <script>
@@@ tailwind.config = {
@@@ theme: {
@@@ extend: {
@@@ colors: {
@@@ clifford: '#da373d',
@@@ }
@@@ }
@@@ }
@@@ };
@@@ </script>
<!-- Custom CSS -->
@@@ <style>
@@@ @layer utilities {
@@@ .content-auto {
@@@ content-visibility: auto;
@@@ }
@@@ }
@@@ .some-class {
@@@ @apply text-red-500;
@@@ }
@@@ </style>
</head>
<body>
@@@ <h1 class="text-3xl font-bold underline some-class">
@@@ Hello world!
@@@ </h1>
</body>
</html>2. Install Tailwind CSS with CLI
Sử dụng TailwindCSS với CLI là một cách cài đặt khá phổ biến và được nhiều người sử dụng. Cách này rất hợp với những dự án sử dụng npm yarn pnpm các trình quản lý package của Node.js. Các bạn có thể tham khảo thêm tại Tailwind CSS CLI
Cách để cài đặt Tailwind CLI như sau :
- chạy lệnh
npm install -D tailwindcss postcss autoprefixerđể cài đặt Tailwind CSS và các plugin cần thiết. - chạy lệnh
npx tailwindcss initđể tạo ra filetailwind.config.jsvà file này sẽ chứa các cấu hình của Tailwind CSS. - chạy lệnh
npm run build:cssđể tạo ra fileoutput.csschứa các class CSS của Tailwind CSS.
module.exports = {
// xác định đường link tới các file sử dụng tailwindcss
// ví dụ ở đây mình muốn compile các file css trong thư mục src có đuôi .html và .js
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}@tailwind base
@tailwind components
@tailwind utilities{
"scripts": {
"build:css": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="HTML Description" />
@@@ <link rel="stylesheet" href="./dist/output.css" />
</head>
<body>
@@@ <h1 class="text-3xl font-bold underline">
@@@ Hello world!
@@@ </h1>
</body>
</html>3. Install Tailwind CSS with Framework
Tailwind hiện nay support được rất nhiều Framework khác nhau như : React, Vue, Angular, Laravel, … để cài đặt Tailwind CSS với các Framework này các bạn có thể tham khảo tại Tailwind CSS Installation
Dưới đây mình sẻ hướng dẫn các bạn cài đặt Tailwind CSS với ReactJS :
- Tạo một project ReactJS mới với
npm create vite@latest reactjs-tailwind -- --template react - Di chuyển vào thư mục project
cd reactjs-tailwind - Cài đặt Tailwind CSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest - Khởi tạo file cấu hình Tailwind CSS
npx tailwindcss init - Chạy project
npm run dev
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}@tailwind base
@tailwind components
@tailwind utilitiesexport default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}IV. Tailwind CSS Features
Tailwind có rất nhiều tính năng, từ config đến các class utilities, các bạn có thể tham khảo tại Tailwind CSS Features, dưới đây mình sẻ hướng dẫn các bạn sử dụng một số tính năng cơ bản của Tailwind CSS.
1. Responsive Design
Tailwind CSS hỗ trợ responsive design với các class utilities có dạng {{property}}:{{breakpoint}}-{{value}} ví dụ text-center md:text-left sẻ center text ở các màn hình nhỏ và left text ở các màn hình lớn hơn. Ngoài ra còn có rất nhiều các breakpoint khác nhau và các bạn cũng có thể custom hoặc add thêm breakpoint vào tailwind Các bạn có thể tham khảo thêm tại Responsive Design
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}2. Dark Mode
Tailwind CSS hỗ trợ dark mode với các class utilities có dạng {{property}}:{{mode}}-{{value}} ví dụ bg-white dark:bg-black sẻ set background color là white ở chế độ light và black ở chế độ dark. Ngoài ra còn có rất nhiều các mode khác nhau và các bạn cũng có thể custom hoặc add thêm mode vào tailwind Các bạn có thể tham khảo thêm tại Dark Mode
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': '#3490dc',
'secondary': '#ffed4a',
'danger': '#e3342f',
}
}
}
}export default function App() {
return (
<div className="bg-primary dark:bg-secondary">
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
</div>
)
}3. Hover, Focus, Active, Visited, Disabled
Tailwind CSS hỗ trợ các pseudo-class như hover, focus, active, visited, disabled với các class utilities có dạng {{pseudo-class}}:{{property}}-{{value}} ví dụ hover:bg-black sẻ set background color là black khi hover vào element. Ngoài ra còn có rất nhiều các pseudo-class khác nhau và các bạn cũng có thể custom hoặc add thêm pseudo-class vào tailwind Các bạn có thể tham khảo thêm tại Pseudo-Class Variants
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
'primary': '#3490dc',
'secondary': '#ffed4a',
'danger': '#e3342f',
}
}
}
}export default function App() {
return (
<div className="bg-primary hover:bg-secondary">
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
</div>
)
}V. Tailwind CSS Plugins
Tailwind CSS hỗ trợ rất nhiều các plugin để giúp bạn tạo ra các class utilities phù hợp với dự án của bạn. Các bạn có thể tham khảo tại Tailwind CSS Plugins
VI. Summary
Bài viết trên mình đã hướng dẫn các bạn cách cài đặt và sử dụng Tailwind CSS. Hy vọng bài viết sẻ giúp các bạn có thể sử dụng Tailwind CSS trong các dự án của mình. Nếu có bất kì thắc mắc nào các bạn có thể comment bên dưới, mình sẻ cố gắng trả lời các bạn sớm nhất có thể. Cảm ơn các bạn đã đọc bài viết này.