Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VSCodeの拡張機能開発で Tailwind CSSを使う
Search
Kazuhiro Ebara
May 10, 2024
2
260
VSCodeの拡張機能開発で Tailwind CSSを使う
2024/05/10に行われたMeguro.css #10 @ oRoで発表した資料です。
Kazuhiro Ebara
May 10, 2024
Tweet
Share
More Decks by Kazuhiro Ebara
See All by Kazuhiro Ebara
ドラゴンボールから学ぶ自己成長するための秘策
ebarakazuhiro
1
20
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
970
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
260
リニューアルを行う際に やったcssのルール作り@megurocss
ebarakazuhiro
1
260
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Making Projects Easy
brettharned
111
5.7k
Clear Off the Table
cherdarchuk
89
320k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Ruby is Unlike a Banana
tanoku
96
10k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
GitHub's CSS Performance
jonrohan
1026
450k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Navigating Team Friction
lara
181
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Documentation Writing (for coders)
carmenintech
63
4.2k
Transcript
VSCodeの拡張機能開発で Tailwind CSSを使う 株式会社HRBrain 江原一博
Agenda 1. 自己紹介 & 会社紹介 2. Tailwind CSSを導入してみ る 3.
まとめ
自己紹介
株式会社HRBrain 技術本部 X(Twitter)@yakiniku040220 フロントエンジニア(たまにサーバーサイドも書きま す。) 自己紹介 江原一博 カラオケ、ゲーム、料理、音楽鑑賞が趣味です。
会社紹介 人事評価
現在VSCode上からSlackにメッセージを送 る拡張機能を作っています。
None
None
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