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」が適応されていることが確認できます。

-
前の記事
javascript エラー「Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument」の解決方法 2022.08.06
-
次の記事
Rust 文字列を指定した区切り文字で区切って逆順にする 2022.08.06
コメントを書く