NEW ARTICLE
kotlin formatを使用して数値の0埋めを行う
  1. HOME
  2. SolidJS
  3. SolidJS Tailwind CSSを使用する

SolidJS Tailwind CSSを使用する

SolidJS Tailwind CSSを使用する

SolidJSで、Tailwind CSSを使用するまでの手順を記述してます。

目次

環境

  • OS  Ubuntu22.10
  • SolidJS 1.4.8

環境構築

まずは、以下のコマンドでプロジェクトを作成します。
※ここでは「solid-test」という名前でプロジェクトを作成して、パッケージをインストールしておきます。

$ npx degit solidjs/templates/js solid-test
$ cd test-solid
$ sudo npm i

Tailwind CSSインストール

「Tailwind CSS」を使用するに必要なものをインストールします。

$ sudo npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

「tailwind.config.js」と 「 postcss.config.js 」を生成します。

$ npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

「tailwind.config.js」を以下の通りに編集します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content:['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

「src」配下にある「index.jsx」で「tailwind.css」をimportします。

/* @refresh reload */
import { render } from 'solid-js/web';
import "tailwindcss/tailwind.css";

import './index.css';
import App from './App';

render(() => <App />, document.getElementById('root'));

「index.css」に追加しておきます。

@tailwind base;
@tailwind components;
@tailwind utilities;

これで「tailwind」が使用できるようになります。

Tailwind CSS使用

「App.jsx」を以下のように「p」タグにclassを追加します。

import logo from './logo.svg';
import styles from './App.module.css';

function App() {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p class="text-4xl text-red-400 tracking-widest">
          Edit <code>src/App.jsx</code> and save to reload.
        </p>        
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
}

export default App;

起動します。

$ sudo npm run dev

ブラウザからアクセスすると「tailwind css」が適応されていることが確認できます。