{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/integrate-tailwind-css-with-react-application","result":{"data":{"markdownRemark":{"id":"c7993308-f93f-504f-ac0e-eb72d937b20c","html":"

Tailwind CSS là 1 low-level CSS framework rất dễ tùy biến, không như những framework, UI Kits khác khi tập trung vào các pre-design components (buttons, cards, modals…) có thể giúp bạn phát triển nhanh ban đầu nhưng sau đó sẽ rất mất công để custom styling cho các component đó. Tailwind tập trung vào low-level utility classes (utility-first) giúp bạn tự build hoàn toàn design của mình mà không phải lo lắng về việc override các style có sẵn.

\n

\"Tailwind

\n

Khá giống với Bootstrap nhưng bộ utility class của Tailwind CSS phong phú hơn rất nhiều

\n

Bài này mình sẽ hướng dẫn anh em cách để tích hợp Tailwind CSS vào React app nhé 😄 😄

\n

Tạo react app

\n

Cách đơn giản nhất để tạo react app là sử dụng create-react-app script với npx

\n
npx create-react-app my-app && cd my-app
\n

Sử dụng npx anh em có thể chạy create-react-app script mà không cần phải cài package này

\n

Thêm dependencies

\n

Cài đặt các dependency sau để set up Tailwind CSS

\n
yarn add tailwindcss postcss-cli autoprefixer -D\n## hoặc npm install tailwindcss postcss-cli autoprefixer --save-dev
\n

Chỉ cần thêm vào devDependencies thôi nhé

\n

Ở đây ngoài Tailwind CSS chúng ta cài thêm:

\n\n

Config PostCSS

\n

PostCSS giúp quản lý và cấu hình việc build CSS.

\n

Tạo file config:

\n
touch postcss.config.js
\n

Thêm config sau:

\n
module.exports = {\n    plugins: [\n        require('tailwindcss'),\n        require('autoprefixer')\n    ],\n};
\n

Quá trình build sử dụng 2 plugin là tailwindcss và autoprefixer

\n

Injecting Tailwind CSS

\n

Tạo 1 sub-folder là styles trong folder src. Trong folder styles tạo file tailwind.css

\n

Hoặc dùng command line:

\n
mkdir src/styles && touch src/styles/tailwind.css
\n

Import các module sau của Tailwind CSS

\n
@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;
\n

tailwind.css

\n
\n

Folder chứa file tailwind.css các bạn có thể đặt tùy ý theo project của mình nhé, có thể là src/static, src/assets, src/styles …

\n
\n

Thêm build script

\n

Mở file package.json, thêm build script sau (vào object scripts):

\n
\"build:css\": \"postcss src/styles/tailwind.css -o src/styles/main.css\"
\n

Script này sẽ sử dụng PostCSS CLI để build css dựa trên những config trong file tailwind.css với output (flag -o) là file main.css

\n

Anh em có thể tùy ý chọn tên file và vị trí, ở đây mình để cả file input chứa config và output trong cùng 1 folder là src/styles

\n

Bây giờ anh em có thể tự trigger build bằng lệnh:

\n
yarn build:css\n# hoặc npm run build:css
\n

Sau khi config và build xong, project của bạn sẽ trông như thế này:

\n

\"Project

\n

Để tiện hơn thì các bạn nên tích hợp build:css command vào script start và build của project, như vậy sẽ đảm bảo CSS luôn đc build lại theo những update mới nhất của mình mỗi lần start project:

\n
\"scripts\": {\n\t\"start\": \"npm run build:css && react-scripts start\",\n\t\"build\": \"npm run build:css && react-scripts build\",\n\t\"test\": \"react-scripts test\",\n\t\"eject\": \"react-scripts eject\",\n\t\"build:css\": \"postcss src/styles/tailwind.css -o src/styles/main.css\"\n}
\n

Tất cả scripts sau khi hoàn thiện

\n

Bây giờ để build CSS và start project thì chỉ cần yarn start là đủ.

\n

Sử dụng trong react component

\n

Import CSS đã build vào file start của project (của mình là index.js):

\n
import './styles/main.css';\n// ... other imports
\n

index.js

\n

Tạo 1 component cơ bản:

\n
import React from 'react';\n\nfunction App() {\n\treturn <div className=\"flex justify-center pt-8\">\n\t\t<div className=\"max-w-sm w-full lg:max-w-full lg:flex shadow-lg\">\n\t\t\t<div className=\"h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden\" style={{ backgroundImage: `url('https://image-us.24h.com.vn/upload/1-2020/images/2020-02-06/kodfd-1580928361-474-width640height480.jpg')` }} title=\"Woman holding a mug\">\n\t\t\t</div>\n\t\t\t<div className=\"border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal\">\n\t\t\t\t<div className=\"mb-8\">\n\t\t\t\t<p className=\"text-sm text-gray-600 flex items-center\">Latest News</p>\n\t\t\t\t\t<div className=\"text-gray-900 font-bold text-xl mb-2\">Messi is moving to Manchester City</div>\n\t\t\t\t\t<p className=\"text-gray-700 text-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t<img className=\"w-10 h-10 rounded-full mr-4\" src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRG2WOlZ4KLuNN1ksjNOmh6oZ091IUhJiZD7w&usqp=CAU\" alt=\"Avatar of Jonathan Reinink\" />\n\t\t\t\t\t<div className=\"text-sm\">\n\t\t\t\t\t\t<p className=\"text-gray-900 leading-none\">Jonathan Reinink</p>\n\t\t\t\t\t\t<p className=\"text-gray-600\">Aug 18</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>;\n}\n\nexport default App;
\n

App.js

\n

Kết quả sẽ trông như thế này:

\n

\"Tailwind

\n

Kết bài

\n

Hi vọng anh em có thể tích hợp và sử dụng Tailwind CSS trong project của mình qua tutorial này, cá nhân mình thấy đây là 1 framework khá đơn giản và dễ sử dụng, chất lượng ổn.

\n

Anh em để lại nhận xét cho mình ở dưới comment nhé :D

\n

Tham khảo

\n","fields":{"slug":"/posts/integrate-tailwind-css-with-react-application","tagSlugs":["/tag/integration/","/tag/tailwind-css/","/tag/postcss/","/tag/react/"]},"frontmatter":{"date":"2020-08-30T22:12:03.284Z","description":"Tailwind CSS là 1 low-level CSS framework rất dễ tùy biến, không như các framework khác khi tập trung vào các pre-design components như buttons, cards, modals... có thể giúp bạn phát triển nhanh ban đầu nhưng sau đó sẽ rất mất công để custom các component có sẵn, Tailwind tập trung vào low-level utility classes...","tags":["integration","tailwind-css","postcss","react"],"title":"Tích hợp Tailwind CSS vào React application","socialImage":"/media/css.jpg","headerImage":"/media/css.jpg"},"timeToRead":6}},"pageContext":{"slug":"/posts/integrate-tailwind-css-with-react-application"}}}