Remix: Vite and Tailwind CSS, Cloudfare Pages

![c229320e0b3aa9-b.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/9de477f3-4b27-3347-e4cd-1408a2df0f2f.jpeg)

Tailwind 学習中。

Remix Vite + Cloudflare Pages で Tailwind CSS 記法を使用してみる。

https://gihyo.jp/book/2024/978-4-297-13943-8

![c229320e0b3aa9-c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/e9b5e366-b85d-d2c7-34a8-90cda82c8ed6.png)

https://my-portfolio-remix-vite.pages.dev/portfolio

## Install
- 基本的に Tailwind Official Doc [^2] のとおり。

## Use Tailwind CSS
- Remix は `class` ではなく `className`。
- Doc 以外の変更点。CSS を外す。
    ```diff: app/routes/portfolio.tsx
    import { Link, Outlet } from "@remix-run/react";
    - import type { LinksFunction } from "@remix-run/cloudflare";
    - import "../index.css"

    - export const links: LinksFunction = () => [
    -  { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" },
    - ];
    ```
- Tailwindcss への変換は ChatGPT に聞く。

- import する。

https://github.com/danny-yamamoto/my-portfolio-remix-vite/blob/7a5935dbc09c1b473b8ab310f112e01338e6ea31/app/root.tsx#L8

## Format
- Plugin を追加。
    ```bash
    npm install -D prettier prettier-plugin-tailwindcss
    touch .prettierrc
    ```

https://github.com/danny-yamamoto/my-portfolio-remix-vite/blob/7a5935dbc09c1b473b8ab310f112e01338e6ea31/.prettierrc#L11

- `className` 内をを並び替える。
    ```bash
    @danny-yamamoto ➜ /workspaces/my-portfolio-remix-vite (main) $ npm run format

    > format
    > prettier --write './**/*.{js,cjs,ts,jsx,tsx,astro,json,html,md}'

    .devcontainer/devcontainer.json 30ms (unchanged)
    .eslintrc.cjs 416ms (unchanged)
    app/articles.server.tsx 30ms
    app/certificates.server.tsx 7ms (unchanged)
    app/experience.server.tsx 10ms (unchanged)
    app/root.tsx 14ms (unchanged)
    app/routes/_index.tsx 15ms (unchanged)
    app/routes/portfolio._index.tsx 15ms (unchanged)
    app/routes/portfolio.articles.tsx 24ms
    app/routes/portfolio.certificates.tsx 12ms
    app/routes/portfolio.experience.tsx 19ms
    app/routes/portfolio.tsx 39ms
    app/types.ts 13ms (unchanged)
    env.d.ts 9ms (unchanged)
    functions/[[path]].ts 20ms (unchanged)
    load-context.ts 10ms (unchanged)
    package-lock.json 440ms (unchanged)
    package.json 2ms (unchanged)
    README.md 47ms
    tailwind.config.js 3ms (unchanged)
    tsconfig.json 3ms (unchanged)
    vite.config.ts 6ms (unchanged)
    worker-configuration.d.ts 4ms (unchanged)
    @danny-yamamoto ➜ /workspaces/my-portfolio-remix-vite (main) $ 
    ```

## Run build process
```bash
@danny-yamamoto ➜ /workspaces/my-portfolio-remix-vite (main) $ npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
^C
@danny-yamamoto ➜ /workspaces/my-portfolio-remix-vite (main) $ 
```

Code はこちら。[^4]

Pages はこちら。[^5]

以上。

## BTW
有休消化に入った。

2 週間遊ぶというのも可能だが、人とご飯に行く以外予定もないため 読書と Programming に励む。

https://presidentstore.jp/category/BOOKS/002517.html

https://www.oreilly.co.jp/books/9784814400539/

https://pub.jmam.co.jp/book/b638496.html

ところが、問題が発生。

家用の MacBook Air (MBA) が Intel のため、Dev Containers [^3] のような CPU Power が必要なアプリが使えない。そうなると Programming が捗らない、、、

MBA M3 を購入しようか迷ったが保留。

次の職場の貸与 MacBook Pro が 1 週間以内に届く予定のため、今購入するのは流石に、、、

ということで GitHub Codespaces [^1] で頑張ることに。

![c229320e0b3aa9-a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/52405675-8b0e-3755-35ac-515eb1ced4bb.png)

無料枠が 120 h ほどあるため乗り切れる見込み。

もし、足りなければ課金 💰

[^1]: https://github.co.jp/features/codespaces
[^2]: https://tailwindcss.com/docs/guides/remix
[^3]: https://code.visualstudio.com/docs/devcontainers/containers
[^4]: https://github.com/danny-yamamoto/my-portfolio-remix-vite
[^5]: https://my-portfolio-remix-vite.pages.dev/portfolio