diff --git a/osmium/src/ui/image-link.tsx b/osmium/src/ui/image-link.tsx index e878fdcc92..a17c3eca3a 100644 --- a/osmium/src/ui/image-link.tsx +++ b/osmium/src/ui/image-link.tsx @@ -18,6 +18,7 @@ export const logos: { [key: string]: { file: string; style?: string } } = { less: { file: "less.svg" }, cssmodules: { file: "css-modules.svg", style: "invert" }, macaron: { file: "macaron.svg" }, + panda: { file: "panda.svg" }, tailwind: { file: "tailwind.svg" }, stormkit: { file: "stormkit.svg" }, sst: { file: "sst.svg" }, diff --git a/public/assets/panda.svg b/public/assets/panda.svg new file mode 100644 index 0000000000..eb9768a302 --- /dev/null +++ b/public/assets/panda.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/routes/(2)guides/(0)styling-components/panda-css.mdx b/src/routes/(2)guides/(0)styling-components/panda-css.mdx new file mode 100644 index 0000000000..102c91dfea --- /dev/null +++ b/src/routes/(2)guides/(0)styling-components/panda-css.mdx @@ -0,0 +1,109 @@ +--- +title: Panda CSS +category: Guides / Styling Components +order: 5 +mainNavExclude: true +use_cases: >- + styling components, css-in-js, build-time styles, design tokens, type-safe + styles +tags: + - styling + - css + - panda + - css-in-js + - postcss + - tokens +version: "1.0" +description: >- + Set up Panda CSS in your Solid app for build-time CSS-in-JS. Configure + PostCSS, define design tokens, and write type-safe styles. +--- + +[Panda CSS](https://panda-css.com/) is a build-time CSS-in-JS library that combines the developer experience of CSS-in-JS with the performance of atomic CSS. +Styles are extracted at build time through PostCSS, so no runtime styling code ships to the browser. + +## Installation + +1. Install Panda CSS as a development dependency: + +```package-install-dev +@pandacss/dev +``` + +2. Initialize Panda CSS in your project. + This creates a `panda.config.ts` file and a `postcss.config.cjs` file: + +```package-exec +panda init --postcss +``` + +3. Add the `prepare` script to your `package.json`, which generates the `styled-system` directory after installs: + +```json title="package.json" +{ + "scripts": { + "prepare": "panda codegen", + "dev": "vite", + "build": "vite build" + } +} +``` + +## Configure Panda CSS + +Open `panda.config.ts` and make sure the `include` patterns match your source files. +Setting `jsxFramework` to `"solid"` enables Solid-specific JSX style props support: + +```ts title="panda.config.ts" +import { defineConfig } from "@pandacss/dev"; + +export default defineConfig({ + preflight: true, + include: ["./src/**/*.{js,jsx,ts,tsx}"], + exclude: [], + jsxFramework: "solid", + outdir: "styled-system", +}); +``` + +## Import the cascade layers + +Add the Panda CSS cascade layers to your `src/index.css` file: + +```css title="src/index.css" +@layer reset, base, tokens, recipes, utilities; +``` + +Then import your `index.css` file into the root `index.jsx` or `index.tsx` file: + +```jsx +/* @refresh reload */ +import { render } from "solid-js/web" +import "./index.css" +import App from "./App" + +render(() => , document.getElementById('root') as HTMLElement); +``` + +## Usage + +With Panda CSS set up, use the `css` function from the generated `styled-system` directory to style your components: + +```jsx +/* src/App.jsx */ +import { css } from "../styled-system/css"; + +function App() { + return ( +
+ Hello from Panda! 🐼 +
+ ); +} + +export default App; +``` + +## Support + +For additional assistance, refer to the [Panda CSS installation guide](https://panda-css.com/docs/installation/vite). diff --git a/src/routes/(2)guides/(0)styling-components/tailwind-v3.mdx b/src/routes/(2)guides/(0)styling-components/tailwind-v3.mdx index f168abc832..00b1d5460b 100644 --- a/src/routes/(2)guides/(0)styling-components/tailwind-v3.mdx +++ b/src/routes/(2)guides/(0)styling-components/tailwind-v3.mdx @@ -1,7 +1,7 @@ --- title: Tailwind CSS v3 category: Guides / Styling Components -order: 7 +order: 8 mainNavExclude: true use_cases: >- utility-first css, rapid prototyping, responsive design, consistent styling, diff --git a/src/routes/(2)guides/(0)styling-components/tailwind.mdx b/src/routes/(2)guides/(0)styling-components/tailwind.mdx index 96cc9e7927..249405028a 100644 --- a/src/routes/(2)guides/(0)styling-components/tailwind.mdx +++ b/src/routes/(2)guides/(0)styling-components/tailwind.mdx @@ -1,7 +1,7 @@ --- title: Tailwind CSS category: Guides / Styling Components -order: 5 +order: 6 mainNavExclude: true use_cases: >- styling components, utility classes, rapid ui development, responsive design, diff --git a/src/routes/(2)guides/(0)styling-components/uno.mdx b/src/routes/(2)guides/(0)styling-components/uno.mdx index 0138a885b9..f248be2c85 100644 --- a/src/routes/(2)guides/(0)styling-components/uno.mdx +++ b/src/routes/(2)guides/(0)styling-components/uno.mdx @@ -1,7 +1,7 @@ --- title: UnoCSS category: Guides / Styling Components -order: 6 +order: 7 mainNavExclude: true use_cases: >- styling components, utility css, on-demand styles, vite integration, atomic diff --git a/src/routes/(2)guides/(0)styling-your-components.mdx b/src/routes/(2)guides/(0)styling-your-components.mdx index 4ab55ba036..2bc1bf8b19 100644 --- a/src/routes/(2)guides/(0)styling-your-components.mdx +++ b/src/routes/(2)guides/(0)styling-your-components.mdx @@ -54,13 +54,21 @@ Many also offer features like theming, media queries, and server-side rendering **Note:** Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid. -### Macaron +
+ + +
+ ## CSS frameworks CSS frameworks provide pre-styled components and utility classes to speed up development.