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

VSCodeの拡張機能開発で Tailwind CSSを使う株式会社HRBrain 江原一博

Agenda 1. 自己紹介 & 会社紹介 2. Tailwind CSSを導入してみる 3.
まとめ

自己紹介

株式会社HRBrain 技術本部 X（Twitter）@yakiniku040220 フロントエンジニア（たまにサーバーサイドも書きます。）自己紹介江原一博カラオケ、ゲーム、料理、音楽鑑賞が趣味です。

会社紹介人事評価

現在VSCode上からSlackにメッセージを送る拡張機能を作っています。

Tailwind CSSを導入してみる

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>`; }

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

tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./dist/**/*.js"],
theme: { extend: {}, }, plugins: [], }; Tailwind.config.jsの設定

index.css @tailwind base; @tailwind components; @tailwind utilities; index.cssの作成

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の更新

webpack.config.js const styleConfig = { ...baseConfig, entry: "./src/index.css", output: {
path: path.resolve(__dirname, "dist"), filename: "index.css", }, }; Webpack.config.jsの更新

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ファイルの更新

まとめ

・Tailwind CSSを導入したことで開発のスピードがかなり上がった。・あまりVSCodeの拡張機能開発でTailwind CSSを導入した記事がなかったので導入するまでの調査と対応に時間がかかってしまった。

We are hiring! https://www.hrbrain.co.jp/recruit

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

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

Kazuhiro Ebara

More Decks by Kazuhiro Ebara

Featured

Transcript