Laravel 10.x 使用 Tailwind CSS

hi，我是温新，一名 PHPer

本篇文章将通过两种方式使用 Tailwind CSS

安装 Tailwind css

此为公共部分

第一步：创建项目

<span style="color: rgb(0, 176, 240);">composer create-project laravel/laravel la10-inertia-study</span><br></br>

第二步：安装 Tailwind css

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">npm</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">install</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">D</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">tailwindcss</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">postcss</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">autoprefixer</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">npx</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">tailwindcss</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">init</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">p</span></span>

第三步：配置路径

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// tailwind.config.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">/** @type {import('tailwindcss').Config} */</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">module</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">exports</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">content</span>: [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"./resources/**/*.blade.php"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"./resources/**/*.js"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"./resources/**/*.vue"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">theme</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">extend</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">plugins</span>: [],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

第四步：添加样式指令

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">/* resources\css\app.css */</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">base</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">components</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">utilities</span>;</span>

第五步：配置 vite.config.js

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> { <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">defineConfig</span> } <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vite'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">laravel</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'laravel-vite-plugin'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">export</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">defineConfig</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">plugins</span>: [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">laravel</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">input</span>: [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/css/app.css'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">refresh</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span>

第六步：导入样式

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\app.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./bootstrap'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'../css/app.css'</span></span>

Blade 模板使用 Tailwind css

如果需要在 blade 模板中使用 tailwind css，需要加在 @vite('resources/js/app.js')，加上就可以使用 tailwind css 了。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">resources\views\welcome</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">blade</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">lang</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ str_replace('_', '-', app()->getLocale()) }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">charset</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"utf-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Laravel</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">10</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Vite</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">3</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">With</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Tailwind</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">CSS</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@vite</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"antialiased"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex justify-center items-center h-screen"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h1</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-3xl text-purple-600 font-bold"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Laravel</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">10</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Vite</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">with</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Tailwind</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">CSS</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h1</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

Inertiajs Vue3 中使用 tailwind css

tailwind css 安装完成后就可以直接在 Vue 中使用。

下面基于这篇文件改动一下：Laravel 10.x - Inertiajs 使用 composer require tightenco/ziggy 组件

只添加样式，其他的什么都不改。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>首页<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">:href</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('about')"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>关于我<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-pink-700"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Home<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-red-400 w-24 h-12 bg-green-300"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>自如初<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\Pages\Index.vue</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>