🚀

astro+TailwindCSS+solidJS【セットアップ】

2022/11/22に公開

Tailwind CSS

Astro

SolidJS

tech

概要

astro上でsolidJSを使いたい人向けの記事になります。
※tailwindはおまけです。

astroを利用するためには以下の環境が必要なので、ご用意ください。

Node.js - 14.18.0、v16.12.0、またはそれ以降。

環境構築

順に以下のコマンドを打ってください。

①astroのプロジェクト生成

# Using NPM
npm create astro@latest

# Using Yarn
yarn create astro

②solidJSの導入

# Using NPM
npx astro add solid
# Using Yarn
yarn astro add solid

③TailwindCSSの導入

# Using NPM
npx astro add tailwind
# Using Yarn
yarn astro add tailwind

全てのコマンドを打ち終わり、PJのディレクトリの中「astro.config.mjs」が以下のようになっていればOKです。
※以下の記述は、solidJSやtailwindのコマンドを打つ際に自動で記述されます。

import { defineConfig } from 'astro/config';

// https://astro.build/config
import solidJs from "@astrojs/solid-js";

// https://astro.build/config
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [solidJs(), tailwind()]
});

これで、astro+TailwindCSS+solidJSの環境構築が完了しました。

構築の詳細は以下のドキュメントを参考ください。
①astroのプロジェクト生成

②solidJSの導入

③TailwindCSSの導入

テスト

前提知識
astroではsolidJSを始め、reactやvueを動かすことができます。
しかし、.astroに直接記述するのではなく、コンポーネントを作成し、コンポーネントをimportする形で利用ができます。

①astroを起動

# Using NPM
npm run dev

# Using Yarn
yarn run dev

②solidJSを動かす
以下のファイルを作成ください

./src/components/solidjs/sample.tsx

import type { Component } from "solid-js";
import { createSignal } from "solid-js";

export const SampleCounter: Component = () => {
  const [count, setCount] = createSignal(0);

  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me</button>
      <p>Count is: {count()}</p>
    </>
  );
};

./src/pages/index.astro

---
import Layout from "../layouts/Layout.astro";
//コンポーネント取得
import { SampleCounter } from "../components/solidjs/sample";
---

<Layout title="Welcome to Astro.">
  <SampleCounter client:only="solid-js" />
</Layout>

以下のように、「Click Me」を押し、カウントが進めばOKです。

※「client:only="solid-js"」に関しては後で解説します。

③tailwindを動かす

./src/components/solidjs/sample.tsx
を以下のように変更(text-9xlというユニティークラスを追加)

import type { Component } from "solid-js";
import { createSignal } from "solid-js";

export const SampleCounter: Component = () => {
  const [count, setCount] = createSignal(0);

  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me</button>
      <p class="text-9xl">Count is: {count()}</p>
    </>
  );
};

以下のように文字が大きくなっていれば成功です。

おまけ（client:only="solid-js"）について

astroでは利用するJSを意図したタイミングで発火が可能です。
ライフサイクルだけでなく、mediaqueryを設置し、横幅に応じて対応も可能です。

詳細は以下のドキュメントに記載あるのでぜひ見てください。

概要

環境構築

テスト

おまけ（client:only="solid-js"）について

Discussion