# Style trong ReactJS với TailwindCss, CssModule và Styled Component ## 1. CSS Modules ### 1.1. Giới thiệu `CSS Modules` là một phương pháp viết CSS cho các ứng dụng web mà không lo lằng về việc xung đột tên lớp, giúp chúng ta tạo ra các lớp CSS có phạm vi cục bộ (local scope) cho từng thành phần (component) của ứng dụng. `CSS Modules` cho phép chúng ta viết CSS trong file `.css` riêng biệt cho từng thành phần (component), sau đó import CSS vào file JavaScript hoặc TypeScript để sử dụng. ### 1.2. Sử dụng `CSS Modules` Trong `vite`, chúng ta có thể sử dụng CSS Module thông qua việc đặt tên file CSS theo cú pháp `[name].module.css`. Với `name` thường là tên của component muốn sử dụng CSS Module. Ví dụ: >Tạo file `App.module.css`: ```css .app { color: red; } ``` >Sử dụng trong file `App.js`: import file CSS và sử dụng class `app`: ```jsx import React from 'react'; import styles from './App.module.css'; function App() { return

Hello World

; } export default App; ``` Khi chúng ta build ứng dụng, vite sẽ tự động tạo ra các class CSS có tên duy nhất để tránh xung đột. Ở ví dụ trên, class `app` sẽ được đổi tên thành `App_app__2e3j4` (tên class có thể thay đổi mỗi lần build). ```html

Hello World

``` Để class CSS không bị đổi tên, chúng ta có thể sử dụng `:global`: Khi đó không cần sử dụng `styles` để import file CSS, mà có thể sử dụng trực tiếp class CSS. > File `App.module.css`: ```css :global(.app) { color: red; } ``` > File `App.js`: ```jsx import React from 'react'; import './App.module.css'; function App() { return

Hello World

; } export default App; ``` Khi đó, class `app` sẽ không bị đổi tên khi build ứng dụng. ```html

Hello World

``` ## 2. Tailwind CSS ### 2.1. Giới thiệu `Tailwind CSS` là một thư viện CSS utility giúp chúng ta viết CSS nhanh chóng và hiệu quả hơn. Thay vì viết CSS từ đầu, chúng ta có thể sử dụng các class CSS có sẵn của `Tailwind CSS` để thiết kế giao diện. `Tailwind CSS` không phải là một thư viện CSS framework truyền thống, nó không cung cấp các component UI sẵn có mà chỉ cung cấp các class CSS utility `Tailwind CSS` giúp tạo ra các giao diện web một cách nhanh chóng và dễ dàng hơn bằng cách sử dụng các class CSS có sẵn. Chúng ta không cần phải viết CSS từ đầu, chỉ cần sử dụng các class CSS có sẵn để tạo ra các giao diện web theo ý muốn. `Tailwind CSS` không giới hạn trong việc tạo ra các giao diện web theo ý muốn. Chúng ta có thể tùy chỉnh các class CSS có sẵn, thêm các class CSS mới, hay thậm chí viết CSS từ đầu nếu muốn. ### 2.2. Cài đặt `Tailwind CSS` Để sử dụng `Tailwind CSS` trong ứng dụng `vite`, chúng ta cần cài đặt các package sau: - `tailwindcss`: Thư viện `Tailwind CSS`. - `postcss`: PostCSS là một trình biên dịch CSS mở rộng, giúp chúng ta sử dụng các plugin CSS. - `autoprefixer`: Plugin giúp tự động thêm các tiền tố CSS vào các thuộc tính CSS. 1. Sử dụng lệnh sau để cài đặt và tạo file cấu hình `tailwind.config.js`: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` 2. Sau khi tạo file `tailwind.config.js`, chúng ta cần cấu hình để cho `Tailwind CSS` biết nơi chứa file HTML và source code React của ứng dụng. ```javascript module.exports = { content: [ './index.html', // Nơi chứa file index.html sau khi biên dịch tất cả các file React Component './src/**/*.{js,jsx,ts,tsx}', // Nơi chứa source code React của ứng dụng ], theme: { extend: {}, }, plugins: [], } ``` 3. Thêm các class CSS của Tailwind CSS vào đầu file `./src/index.css`, mục đích là để Tailwind CSS biết các class CSS cần sử dụng: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 4. Cài đặt `prettier-plugin-tailwindcss` để format lại class CSS của Tailwind CSS, nếu đã làm việc với `Prettier` ở bước cài đặt `ESLint` rồi thì không cần cài đặt lại: ```bash npm install -D prettier-plugin-tailwindcss ``` 5. Thêm cấu hình cho `prettier` tạo file `prettier.config.js`: ```javascript const config = { //.. other config plugins: ['prettier-plugin-tailwindcss'], } export default config; ``` # 2.3. Sử dụng Tailwind CSS trong React ## 2.3.1 Responsive design Mặc định các style sẽ được áp dụng cho màn hình mobile, để tùy chỉnh style cho các màn hình khác nhau, bạn có thể sử dụng các class CSS có tiền tố `sm:`, `md:`, `lg:`, `xl:`, `2xl:` để tùy chỉnh style cho các màn hình có kích thước khác nhau. Nếu không sử dụng responsive design, style sẽ đưoc áp dụng cho tất cả các màn hình. Nếu dùng thì style ban đầu sẽ được áp dụng cho màn hình ban đầu đến màn hình đang được tùy chỉnh, style đang được tùy chỉnh sẽ được áp dụng từ màn hình đó đến màn hình lớn nhất. > Lưu ý cần phải thiết lập style cho màn hình mobile trước, sau đó mới tùy chỉnh style cho các màn hình khác nhau. Mặc định, Tailwind CSS sẽ áp dụng style cho màn hình mobile. (Không có tiền tố trước class CSS) Ví dụ: ```jsx

Tailwind CSS

``` - Trong ví dụ trên, màu nền của `div` sẽ thay đổi tùy theo kích thước màn hình. * Màn hình `mobile` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `xanh dương`. * Màn hình `tablet` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `đỏ`. * Màn hình `laptop` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `xanh lá cây`. * Màn hình `desktop` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `vàng`. * Màn hình lớn hơn `desktop - xl` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `hồng`. * Màn hình lớn hơn `desktop - 2xl` (và lớn hơn trở đi nếu không có `style` màn hình nào áp dụng): màu nền là màu `tím`. ## 2.3.2 Sử dụng lại các class CSS trong Tailwind CSS nhờ `@apply` Chúng ta có thể sử dụng lại các class CSS trong Tailwind CSS nhờ `@apply` Ở file `./src/index.css`, thêm `@layer components` để sử dụng `@apply`: ```css @tailwind base; @tailwind components; @tailwind utilities; @layer components { .btn { @apply px-4 py-2 bg-blue-500 text-white rounded-md; } } ``` Ở các component khác có thể sử dụng lại class CSS `btn`: ```jsx ``` ## 3.3 Ngoài ra để tái sử dụng cũng như mở rộng Tailwind CSS => config `tailwind.config.js` Chúng ta có thể mở rộng Tailwind CSS thông qua file `tailwind.config.js`, trong đó chúng ta có thể thêm các class CSS mới, tùy chỉnh các class CSS, cũng như thêm các theme mới. >Ví dụ: ```javascript module.exports = { content: [ './index.html', // Nơi chứa file index.html './src/**/*.{js,jsx,ts,tsx}', // Nơi chứa source code React ], theme: { fontFamily: { sans: ['Inter', 'sans-serif'], }, // Nếu ghi ở ngoài thì mặc định nó sẽ ghi đè lên font-family mặc định của Tailwind CSS extend: { colors: { do: '#ff0000', xanh: '#00ff00', }, fontSize: { '10xl': '10rem', }, height: { sceen: '100dvh', // dvh dynamic view height là 100% chiều cao của màn hình, khác với 100vh là 100% chiều cao của viewport }, }, // Nếu ghi ở trong thì nó sẽ mở rộng thêm style mà không ghi đè lên style mặc định của Tailwind // VD: text-xanh-500 sẽ có màu xanh, text-do-500 sẽ có màu đỏ, text-10xl sẽ có kích thước font-size là 10rem, h-screen sẽ có chiều cao là 100% chiều cao của màn hình }, plugins: [], } ``` ## 4. CSS-in-JS với Styled Components ### 4.1. Giới thiệu `Styled Components` là một thư viện CSS-in-JS giúp chúng ta viết CSS trong JavaScript một cách dễ dàng và hiệu quả hơn. Thay vì viết CSS trong file `.css`, chúng ta có thể viết CSS trong file JavaScript hoặc TypeScript. `Styled Components` giúp chúng ta tạo ra các component với CSS-in-JS, giúp chúng ta viết CSS trong file JS mà không cần phải tạo ra file CSS riêng. ## 4.2. Cài đặt Để cài đặt `Styled Component`, chúng ta chạy lệnh sau: ```bash npm install styled-components ``` ## 4.3. Sử dụng ### 4.3.1. Tạo một Styled Component Để tạo một Styled Component, chúng ta sử dụng hàm `styled` của thư viện Styled Component. Sau đó, chúng ta sử dụng `styled` kết hợp với tên thẻ HTML (ví dụ: `div`, `h1`, `p`, `span`,...) để tạo ra một Styled Component với tên tùy chọn. Ví dụ: > App.js ```jsx import styled from 'styled-components'; // import styled từ thư viện Styled Component const Div = styled.div` /* Tạo một Styled Component với tên Div */ color: red; ` return (

{/* Thẻ div này sẽ có màu chữ màu đỏ vì đã được styled */ }

Hello Styled Component

) ``` `Styled Component` sẽ nhận vào một thẻ HTML và trả về một thẻ HTML đã được `styled`. Và đặc biệt nó có thể nhận vào một Styled Component khác để tạo ra một Styled Component mới. >Ví dụ: ```jsx const Div = styled.div` color: red; ` const Div2 = styled(Div)` font-size: 2rem; ` ``` Ngoài ra vì là 1 `component` nên có thể `truyền` vào các `props` như một component bình thường. >Ví dụ: ```jsx const Div = styled.div` color: ${(props) => props.color}; // sử dụng props.color để thay đổi màu chữ của thẻ div ` return (

// thẻ div này sẽ có màu chữ màu đỏ vì props.color="red" ) ``` ### 3.2. Sử dụng `createGlobalStyle` để tạo global style cho toàn bộ ứng dụng Để tạo global style cho toàn bộ ứng dụng, chúng ta sử dụng `createGlobalStyle` của thư viện Styled Component. Ví dụ: > styles/GlobalStyle.js ```jsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { background-color: #f0f0f0; } ` export default GlobalStyle; ``` > App.js ```jsx import GlobalStyle from './styles/GlobalStyle'; return ( <>

Hello Styled Component

) ``` > Lưu ý component `GlobalStyle` phải được đặt ở trên các component khác để style của nó được áp dụng trước. Và nó không nhận vào props cũng như children. ### 3.3. Sử dụng props và css trong Styled Component Chúng ta có thể sử dụng `props` và `css` trong Styled Component để tạo ra các style linh hoạt. Ví dụ: > Heading.js ```jsx import styled, { css } from 'styled-components'; const h1 = css` font-size: 3rem; font-weight: 600; `; // định nghĩa các kiểu cho h1 const h2 = css` font-size: 2rem; font-weight: 600; `; // định nghĩa các kiểu cho h2 const h3 = css` font-size: 2rem; font-weight: 500; `; // định nghĩa các kiểu cho h3 const Heading = styled.h1` line-height: 1.4; ${(props) => props.as === "h1" && h1} // nếu props.as === "h1" thì sẽ áp dụng css của h1 ${(props) => props.as === "h2" && h2} // nếu props.as === "h2" thì sẽ áp dụng css của h2 ${(props) => props.as === "h3" && h3} // nếu props.as === "h3" thì sẽ áp dụng css của h3 `; export default Heading; ``` > App.js ```jsx import Heading from './Heading'; return ( <> Hello Styled Component {/* sử dụng Heading với props as="h1" sẽ trả về 1 element html h1 */} Hello Styled Component {/* sử dụng Heading với props as="h2" sẽ trả về 1 element html h2 */} Hello Styled Component {/* sử dụng Heading với props as="h3" sẽ trả về 1 element html h3 */} ) ```

ReactJS: Tạo kiểu style cho Component với TailwindCSS, CSS Module và Styled Component