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
GraphQLとの向き合い方2022年版
quramy
44
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
302
45k
Writing Fast Ruby
sferik
628
61k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Faster Mobile Websites
deanohume
306
31k
Being A Developer After 40
akosma
89
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
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