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
400
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
51
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
430
リニューアルを行う際に やったcssのルール作り@megurocss
ebarakazuhiro
1
280
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Music & Morning Musume
bryan
46
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How GitHub (no longer) Works
holman
313
140k
Bash Introduction
62gerente
610
210k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Optimizing for Happiness
mojombo
376
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Designing Experiences People Love
moore
139
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
GraphQLとの向き合い方2022年版
quramy
44
13k
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