| 最新版 |
編集中の文章 |
| 489行目: |
489行目: |
| | % DEBUG=teranote:* npm start | | % DEBUG=teranote:* npm start |
| | | | |
| − | <nowiki>Express で Tailwind を使うには、以下の手順を実行します。
| |
| − |
| |
| − | 1. npm で Tailwind をインストールします。
| |
| − | 2. Tailwind の設定ファイルを作成します。
| |
| − | 3. Express アプリで Tailwind を有効にします。
| |
| − |
| |
| − | ### 1. npm で Tailwind をインストールする
| |
| − |
| |
| − | Tailwind をインストールするには、次のコマンドを実行します。
| |
| − |
| |
| − | ```
| |
| − | npm install tailwindcss
| |
| − | ```
| |
| − |
| |
| − | このコマンドを実行すると、Tailwind がインストールされます。
| |
| − |
| |
| − | ### 2. Tailwind の設定ファイルを作成する
| |
| − |
| |
| − | Tailwind の設定ファイルを作成するには、次のコマンドを実行します。
| |
| − |
| |
| − | ```
| |
| − | npx tailwindcss init
| |
| − | ```
| |
| − |
| |
| − | このコマンドを実行すると、`tailwind.config.js` ファイルが作成されます。
| |
| − |
| |
| − | `tailwind.config.js` ファイルで、Tailwind の設定を変更することができます。
| |
| − |
| |
| − | ### 3. Express アプリで Tailwind を有効にする
| |
| − |
| |
| − | Express アプリで Tailwind を有効にするには、次の手順を実行します。
| |
| − |
| |
| − | 1. Express アプリの `index.js` ファイルで、`tailwindcss` を `dependencies` または `devDependencies` に追加します。
| |
| − | 2. `index.js` ファイルで、`tailwindcss` を `import` します。
| |
| − | 3. `index.js` ファイルで、`express.static()` を使用して、Tailwind の CSS ファイルを読み込みます。
| |
| − |
| |
| − | たとえば、次のコードのように `index.js` ファイルを変更すると、Tailwind が有効になります。
| |
| − |
| |
| − | ```javascript
| |
| − | const express = require('express');
| |
| − | const path = require('path');
| |
| − |
| |
| − | const app = express();
| |
| − |
| |
| − | // Tailwind CSS を dependencies に追加
| |
| − | // または
| |
| − | // Tailwind CSS を devDependencies に追加
| |
| − | app.use(express.static(path.join(__dirname, 'node_modules', 'tailwindcss', 'dist', 'tailwind.min.css')));
| |
| − |
| |
| − | app.get('/', (req, res) => {
| |
| − | res.send('Hello, world!');
| |
| − | });
| |
| − |
| |
| − | app.listen(3000, () => {
| |
| − | console.log('Server started on port 3000');
| |
| − | });
| |
| − | ```
| |
| − |
| |
| − | このコードを実行すると、Tailwind を使用してレンダリングされた、次の HTML が生成されます。
| |
| − |
| |
| − | ```html
| |
| − | <!DOCTYPE html>
| |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title>Hello, world!</title>
| |
| − | <link href="/tailwind.min.css" rel="stylesheet">
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="text-center">
| |
| − | <h1>Hello, world!</h1>
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |
| − | ```
| |
| − |
| |
| − | ### その他のオプション
| |
| − |
| |
| − | Tailwind を Express で使用するときに、次のオプションを設定することもできます。
| |
| − |
| |
| − | * `tailwind.config.js` ファイルで、`purge` オプションを指定すると、Tailwind で使用されていない CSS を削除できます。
| |
| − | * `tailwind.config.js` ファイルで、`content` オプションを指定すると、Tailwind で使用される CSS を変更できます。
| |
| − | * `index.js` ファイルで、`express.style()` を使用して、Tailwind の CSS を直接適用することもできます。</nowiki>
| |
| | | | |
| | | | |
