From 94754b19399ac3959061f39e14ada0b5d63fb6e2 Mon Sep 17 00:00:00 2001 From: ImRLopezAG Date: Tue, 8 Apr 2025 13:26:39 -0400 Subject: [PATCH] Add Rsbuild configuration --- .../installation/framework-guides/index.ts | 1 + .../installation/framework-guides/rsbuild.tsx | 169 ++++++++++++++++++ src/docs/img/guides/rsbuild.react.svg | 1 + 3 files changed, 171 insertions(+) create mode 100644 src/app/(docs)/docs/installation/framework-guides/rsbuild.tsx create mode 100644 src/docs/img/guides/rsbuild.react.svg diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts index 14f5a4b35..936b3295b 100644 --- a/src/app/(docs)/docs/installation/framework-guides/index.ts +++ b/src/app/(docs)/docs/installation/framework-guides/index.ts @@ -26,6 +26,7 @@ const guides: Guide[] = await create({ astro: () => import("./astro"), qwik: () => import("./qwik"), rspack: () => import("./rspack"), + rsbuild: () => import("./rsbuild"), }); async function create(list: Record Promise>): Promise { diff --git a/src/app/(docs)/docs/installation/framework-guides/rsbuild.tsx b/src/app/(docs)/docs/installation/framework-guides/rsbuild.tsx new file mode 100644 index 000000000..cb8be7f8d --- /dev/null +++ b/src/app/(docs)/docs/installation/framework-guides/rsbuild.tsx @@ -0,0 +1,169 @@ +import { css, html, js, Page, shell, Step, Tab, Tile } from "./utils"; +import Logo from "@/docs/img/guides/rsbuild.react.svg"; + +export let tile: Tile = { + title: "Rsbuild", + description: "The Rspack Powered Build Tool.", + Logo +}; + +export let page: Page = { + title: "Install Tailwind CSS with Rsbuild", + description: "Setting up Tailwind CSS in a Rsbuild project.", +}; + +export let tabs: Tab[] = [ + { + slug: "react", + title: "Using React", + }, + { + slug: "vue", + title: "Using Vue", + }, +]; + +export let steps: Step[] = [ + { + title: "Create your project", + body: ( +

+ Start by creating a new Rsbuild project if you don’t have one set up already. The most common approach is to use{" "} + Rsbuild CLI. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm create rsbuild@latest + `, + }, + }, + + { + title: "Install Tailwind CSS", + body: ( +

+ Install @tailwindcss/postcss and its peer dependencies. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm add tailwindcss @tailwindcss/postcss -D + `, + }, + }, + { + title: "Enable PostCSS support", + body: ( +

+ In your rsbuild.config.js file, enable the PostCSS loader. See{" "} + the documentation for more information. +

+ ), + code: { + name: "rsbuild.config.ts", + lang: "ts", + code: js` + import { defineConfig } from '@rsbuild/core' + import tailwindCssPostcss from '@tailwindcss/postcss' + export default defineConfig({ + tools: { + postcss: { + postcssOptions: { + plugins: [tailwindCssPostcss()], + }, + }, + } + }) + `, + }, + }, + { + tabs: ["react"], + title: "Import Tailwind CSS", + body: ( +

+ Add an @import to ./src/index.css that imports Tailwind CSS. +

+ ), + code: { + name: "index.css", + lang: "css", + code: css` + @import "tailwindcss"; + `, + }, + }, + { + tabs: ["vue"], + title: "Import Tailwind CSS", + body: ( +

+ Add an @import to ./src/style.css that imports Tailwind CSS. +

+ ), + code: { + name: "style.css", + lang: "css", + code: css` + @import "tailwindcss"; + `, + }, + }, + { + title: "Start your build process", + body: ( +

+ Run your build process with npm run dev. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm run dev + `, + }, + }, + { + tabs: ["react"], + title: "Start using Tailwind in your project", + body:

Start using Tailwind’s utility classes to style your content.

, + code: { + name: "App.jsx", + lang: "jsx", + code: js` + export default function App() { + return ( + // [!code highlight:4] +

+ Hello world! +

+ ) + } + `, + }, + }, + { + tabs: ["vue"], + title: "Start using Tailwind in your project", + body:

Start using Tailwind’s utility classes to style your content.

, + code: { + name: "App.vue", + lang: "vue", + code: html` + + `, + }, + }, +]; diff --git a/src/docs/img/guides/rsbuild.react.svg b/src/docs/img/guides/rsbuild.react.svg new file mode 100644 index 000000000..b41627b9e --- /dev/null +++ b/src/docs/img/guides/rsbuild.react.svg @@ -0,0 +1 @@ + \ No newline at end of file