VSCodeの拡張機能開発で Tailwind CSSを使う

2024/05/10に行われたMeguro.css #10 @ oRoで発表した資料です。

Transcript

1. VSCodeの拡張機能開発で Tailwind CSSを使う 株式会社HRBrain 江原一博
2. Agenda 1. 自己紹介 & 会社紹介 2. Tailwind CSSを導入してみ る 3. まとめ
3. 自己紹介
4. 株式会社HRBrain 技術本部 X（Twitter）@yakiniku040220 フロントエンジニア（たまにサーバーサイドも書きま す。） 自己紹介 江原一博 カラオケ、ゲーム、料理、音楽鑑賞が趣味です。
5. 会社紹介 人事評価
6. 現在VSCode上からSlackにメッセージを送 る拡張機能を作っています。
9. Tailwind CSSを導入してみる
10. Tailwind CSSの導入の経緯 VSCodeのWebview部分の見通しが悪い。 export function activate(context: ExtensionContext) { … panel.webview.html = getWebviewContent(); … } function getWebviewContent() { return `<!DOCTYPE html> 　　<html lang="en"> 　　<head> 　　　<meta charset="UTF-8"> 　　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　　<title>Cat Coding</title> 　　</head> 　　<body> 　　　<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /> 　　</body> 　</html>`; }
11. Tailwind CSSを入れてみる 今回はReactをすでに入れた状態から導入してみます。 yarn add -D tailwindcss npx tailwindcss init 上記以外に必要なパッケージも installします。 yarn add -D mini-css-extract-plugin css-minimizer-webpack-plugin css-loader postcss postcss-loader autoprefixer
12. tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./dist/**/*.js"], theme: { extend: {}, }, plugins: [], }; Tailwind.config.jsの設定
13. index.css @tailwind base; @tailwind components; @tailwind utilities; index.cssの作成
14. webpack.config.js const baseConfig = { plugins: [ new MiniCssExtractPlugin({ filename: "./src/index.css", }), ], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], }, ] }, optimization: { minimizer: [new CssMinimizerPlugin()], }, } Webpack.config.jsの更新
15. webpack.config.js const styleConfig = { ...baseConfig, entry: "./src/index.css", output: { path: path.resolve(__dirname, "dist"), filename: "index.css", }, }; Webpack.config.jsの更新
16. extension.js function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) { return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList)); } function getWebviewContent(webview: Webview, extensionUri: Uri) { const styleUri = getUri(webview, extensionUri, ["dist", "src", "index.css"]); return ` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${channelName}</title> <link href="${styleUri}" rel="stylesheet"> </head> <body> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /> </body> </html>`; } extension.jsファイルの更新
17. まとめ
18. ・Tailwind CSSを導入したことで開発のスピードがかなり上がった。 ・あまりVSCodeの拡張機能開発でTailwind CSSを導入した記事がな かったので導入するまでの調査と対応に時間がかかってしまった。
19. We are hiring! https://www.hrbrain.co.jp/recruit