From 8571efd50db047facfc3cbcd16f20c188adca11f Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 28 May 2024 10:53:57 +0100
Subject: [PATCH] feat: add remix post + disable writing status

---
 src/posts/clack-prompts.md |   2 +-
 src/posts/remix.md         | 116 +++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/posts/remix.md

diff --git a/src/posts/clack-prompts.md b/src/posts/clack-prompts.md
index 75cce79..c98e75e 100644
--- a/src/posts/clack-prompts.md
+++ b/src/posts/clack-prompts.md
@@ -3,7 +3,7 @@ title: How to create a cli with clack
 description: Learn how to create a beautiful CLI to generate projects with custom templates using clack/prompts & Typescript.
 date: '2024-4-21'
 category: 'Tutorial'
-writing: true
+writing: false
 published: true
 ---
 
diff --git a/src/posts/remix.md b/src/posts/remix.md
new file mode 100644
index 0000000..0a9c458
--- /dev/null
+++ b/src/posts/remix.md
@@ -0,0 +1,116 @@
+---
+title: Remix v2 Snippets
+description: Code snippets for Remix.
+date: '2024-4-28'
+category: 'Snippets'
+writing: false
+published: true
+---
+
+## Import styles
+
+If you're using Remix with **Vite**, you can import styles like this:
+
+```jsx
+import type { LinksFunction } from "@remix-run/node";
+
+import stylesheet from "@/styles/globals.css?url"; // 👈
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
+```
+
+and that the Vite compiler does not interpret `.css` files as paths:
+
+```jsx
+export default defineConfig({
+  plugins: [
+    remix({
+      ignoredRouteFiles: ["**/*.css"], // 👈
+    }),
+  ],
+});
+```
+
+## Routes
+
+A guide for managing routes in Remix v2:
+
+```bash
+📂 app
+  📂 routes
+   | - ⚛️ app.tsx -> layout that wraps all the paths of /app. You have to add <Outlet /> from @remix-run/react.
+   | - 🟦 action.set-theme.ts -> /action/set-theme. Exports a server-side ``action``. Ideal for use with <Form /> from @remix-run/react.
+   | - ⚛️ app._index.tsx -> /app (main page)
+   | - ⚛️ app.settings.tsx -> /app/settings
+   | - ⚛️ app.$username.tsx -> /app/pheralb o /app/midudev. 💡
+   | - ⚛️ root.tsx -> layout that wraps the entire application.
+```
+
+- 💡 To obtain the *$username*: [remix.run/docs/en/main/route/loader#params](https://remix.run/docs/en/main/route/loader#params)
+
+## Install & configure Tailwind CSS with Prettier
+
+1. Install Tailwind CSS, Prettier & Autoprefixer:
+    
+```bash
+pnpm i tailwindcss prettier prettier-plugin-tailwindcss autoprefixer -E -D
+```
+
+2. Create a `global.css` or `styles.css` in the `app/` folder:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+3. Import the styles in the `app/routes/root.tsx`:
+
+```jsx
+import type { LinksFunction } from "@remix-run/node";
+
+import stylesheet from "@/styles/globals.css?url"; // or styles.css 👀
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
+```
+
+4. Create a `tailwind.config.ts` file:
+
+```bash
+npx tailwindcss init --ts
+```
+
+5. In the `tailwind.config.ts` file, add the following:
+
+```ts
+export default {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'], // 👈
+  ...
+} satisfies Config
+```
+
+6. Create a `postcss.config.js` file:
+
+```js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+7. Create a `prettier.config.js` file:
+
+```js
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+  ...
+};
+```
+
+Ready 🚀✨
\ No newline at end of file