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
490
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
88
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
530
リニューアルを行う際に やったcssのルール作り@megurocss
ebarakazuhiro
1
300
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Writing Fast Ruby
sferik
629
62k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
A designer walks into a library…
pauljervisheath
209
24k
Balancing Empowerment & Direction
lara
4
680
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Scaling GitHub
holman
463
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Rails Girls Zürich Keynote
gr2m
95
14k
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