feat(blog): add multiple new articles on browser rendering, JavaScript traps, Git commit conventions, Tailwind CSS integration, and Gitea actions automation

2026-01-09 09:31:20 +08:00
parent 1c9f154652
commit 51eac1c2ef
11 changed files with 3 additions and 2 deletions
--- a/src/pages/blog/posts/2023110501.md
+++ b/src/pages/blog/posts/2023110501.md
@@ -0,0 +1,129 @@
+---
+layout: "@/layouts/BlogPostLayout.astro"
+title: "Using Tailwind CSS in Docusaurus v3"
+description: "This article details how to integrate and configure Tailwind CSS in Docusaurus v3, including installing dependencies, configuring tailwind.config.js, creating tailwind.css and postcss.config.js, and more."
+date: "2023-11-05"
+image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop"
+tags: ["Docusaurus", "TailwindCSS", "Frontend Framework"]
+tagId: ["docusaurus", "tailwindcss", "frontend-framework"]
+category: "Frontend Development"
+categoryId: "frontend"
+readTime: "4 min read"
+---
+
+## Installing Dependencies
+
+```bash
+npm install tailwindcss
+```
+## Configuring tailwind.config.js
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx,md,mdx}",
+    "./docs/**/*.{md,mdx}",
+  ],
+  theme: {
+    screens: {
+      xs: '480px',
+      sm: '576px',
+      md: '768px',
+      lg: '998px',
+      xl: '1200px',
+      '2xl': '1400px',
+    },
+    extend: {
+      fontFamily: {
+        sans: 'var(--ifm-font-family-base)',
+        firacode: 'var(--font-family-firacode)',
+        kaiti: 'var(--font-family-kaiti)',
+      },
+      colors: {
+        'font-color': 'var(--ifm-font-color-base)',
+        'link-color': 'var(--ifm-link-color)',
+        'link-hover-color': 'var(--ifm-link-hover-color)',
+        primary: 'var(--ifm-color-primary)',
+        'primary-light': 'var(--ifm-color-primary-light)',
+        'primary-lighter': 'var(--ifm-color-primary-lighter)',
+        'primary-lightest': 'var(--ifm-color-primary-lightest)',
+        'primary-dark': 'var(--ifm-color-primary-dark)',
+        'primary-darker': 'var(--ifm-color-primary-darker)',
+        'primary-darkest': 'var(--ifm-color-primary-darkest)',
+      },
+      boxShadow: {
+        nysm: '0 0 2px 0 rgb(0 0 0 / 0.05)',
+        ny: '0 0 3px 0 rgb(0 0 0 / 0.1), 0 0 2px - 1px rgb(0 0 0 / 0.1)',
+        nymd: '0 0 6px -1px rgb(0 0 0 / 0.1), 0 0 4px -2px rgb(0 0 0 / 0.1)',
+        nylg: '0 0 15px -3px rgb(0 0 0 / 0.1), 0 0 6px -4px rgb(0 0 0 / 0.1)',
+        spread: '0 5px 40px rgb(0 0 0 / 0.1)',
+      },
+    },
+  },
+  plugins: [],
+  darkMode: ["class", '[data-theme="dark"]'],
+  corePlugins: {
+    preflight: false,
+  },
+  blocklist: ["container"],
+}
+```
+## Creating tailwind.css
+
+Create a `tailwind.css` file in the `src/css` directory and add the following content:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+**Note: After creation, you need to import tailwind.css in custom.css, otherwise the tailwind styles will not take effect**
+
+## Creating postcss.config.js
+
+Create a `postcss.config.js` file in the project root directory and add the following content:
+
+```js
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	}
+}
+```
+
+## Importing tailwind.css in custom.css
+
+Find the `src/css/custom.css` file in your project and add the following content at the top of the file:
+
+```css
+@import './tailwind.css';
+```
+
+## Using Tailwind CSS
+
+Now, you can use Tailwind CSS styles in your project. For example:
+
+```jsx
+<div className="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
+  <h2 className="text-2xl font-bold text-primary mb-2">Hello Tailwind CSS</h2>
+  <p className="text-gray-700 dark:text-gray-300">This is a paragraph styled with Tailwind CSS</p>
+</div>
+```
+
+## Notes
+
+1. Since Docusaurus already has its own CSS styles, we disabled `preflight` in the Tailwind CSS configuration to avoid style conflicts.
+
+2. We used the `darkMode: ["class", '[data-theme="dark"]']` configuration to make Tailwind CSS's dark mode consistent with Docusaurus's dark mode.
+
+3. We added some variables in `theme.extend.colors` that use Docusaurus's CSS variables, making Tailwind CSS colors consistent with Docusaurus theme colors.
+
+4. We added `container` to the `blocklist` because Docusaurus already has its own container styles, and we don't want Tailwind CSS's container styles to override them.
+
+## Summary
+
+Through the above steps, we have successfully integrated Tailwind CSS into Docusaurus v3. Now, we can use all the features of Tailwind CSS while maintaining consistency with the Docusaurus theme.
+
+I hope this article has been helpful to you! If you have any questions, feel free to leave a comment.