{"id":773,"date":"2025-06-11T23:21:13","date_gmt":"2025-06-11T15:21:13","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/773.html"},"modified":"2025-06-11T23:21:13","modified_gmt":"2025-06-11T15:21:13","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-laravel-%e4%b8%ad%e4%bd%bf%e7%94%a8-tailwind-css","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/773.html","title":{"rendered":"\u5982\u4f55\u5728 Laravel \u4e2d\u4f7f\u7528 Tailwind CSS"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

在 Laravel 中使用 Tailwind CSS 可以显著提高开发效率和项目可维护性。以下是详细的步骤指南：<\/p>\n

1. 安装 Tailwind CSS<\/h3>\n

首先，你需要安装 Tailwind CSS 和其依赖项。<\/p>\n

npm install tailwindcss postcss autoprefixer --save-dev<\/code><\/pre>\n
2. 配置 PostCSS<\/h3>\n
Tailwind CSS 使用 PostCSS 来处理 CSS。你需要创建一个 postcss.config.js<\/code> 文件来配置 PostCSS。<\/p>\n
module.exports = {\n  plugins: [\n    require('tailwindcss'),\n    require('autoprefixer')\n  ]\n}<\/code><\/pre>\n
3. 创建 Tailwind CSS 资源文件<\/h3>\n
Tailwind CSS 提供了一些预定义的类，但如果你需要自定义样式，可以创建一个 tailwind.css<\/code> 文件。<\/p>\n
\/* resources\/css\/tailwind.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\/* 添加自定义样式 *\/\n.my-custom-class {\n  color: red;\n  font-size: 16px;\n}<\/code><\/pre>\n
4. 集成到 Laravel 应用中<\/h3>\n
将 tailwind.css<\/code> 文件添加到你的 resources\/views\/layouts\/app.blade.php<\/code> 或其他布局文件中。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Laravel with Tailwind CSS<\/title>\n    @vite(['resources\/css\/app.css'])\n<\/head>\n<body>\n    <!-- 其他 HTML 内容 -->\n<\/body>\n<\/html><\/code><\/pre>\n
5. 使用 Tailwind CSS 类<\/h3>\n
现在你可以使用 Tailwind CSS 的预定义类来构建你的页面。<\/p>\n
<div class=\"bg-blue-100 p-4 rounded-lg my-custom-class\">\n    This is a custom styled div using Tailwind CSS.\n<\/div><\/code><\/pre>\n
示例代码：动态生成颜色<\/h3>\n
如果你需要根据条件动态生成颜色，可以使用 Tailwind CSS 的颜色系统。<\/p>\n
<div class=\"{{ $color ? 'bg-' . $color : 'bg-white' }}\">\n    This div has a dynamic background color based on the value of $color.\n<\/div><\/code><\/pre>\n
6. 按需加载 Tailwind CSS<\/h3>\n
为了优化性能，你可以按需加载 Tailwind CSS。这可以通过以下方式实现：<\/p>\n
    \n
  1. 在 resources\/js\/app.js<\/code> 中引入 Tailwind CSS。<\/li>\n<\/ol>\n
    import { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport tailwindcss from 'tailwindcss';\n\ncreateApp(App).use(tailwindcss).mount('#app');<\/code><\/pre>\n
      \n
    1. 在 webpack.mix.js<\/code> 中配置 Tailwind CSS。<\/li>\n<\/ol>\n
      const mix = require('@vue\/cli-service\/lib\/mix');\n\nmix.js('src\/main.js', 'dist\/js').postCss();<\/code><\/pre>\n
      通过以上步骤，你可以在 Laravel 中成功集成并使用 Tailwind CSS。Tailwind CSS 提供了强大的工具和灵活性，可以帮助你在项目的各个部分快速构建响应式和美观的用户界面。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
      \r\n
      \r\n
      \r\n
      \r\n
      \r\n
      \"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
      黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
      \r\n
      \r\n
      介绍<\/h2>
      在现代的Web开发中，利用CSS框架来处理样式可以大幅提高开发效率。Tailwind CSS是一个基于实用工具的第一代CSS框架，以其灵活性和自定义性而受到欢迎。将其与Laravel（一个功能强大且广泛使用的PHP框架）结合使用可以帮助您高效地构建美观且响应式的Web应用程序。本指南将从基础开始，逐步介绍如何将Tailwind CSS集成到您的Laravel项目中。<\/p>
      前置条件<\/p>
      Node.js和npm已经安装好了。<\/p>
      熟悉HTML和CSS是非常重要的技能，对于网页设计和开发至关重要。<\/p>
      基本的Laravel理解<\/p>
      开始使用Laravel和Tailwind CSS<\/h2>
      首先，你需要有一个Laravel项目。如果你还没有，可以运行以下命令来创建一个新的Laravel项目：<\/p>
      composer create-project --prefer-dist laravel\/laravel your-project-name\n<\/code><\/pre>
      一旦你的Laravel项目准备好了，就导航到该项目的目录：<\/p>
      cd your-project-name\n<\/code><\/pre>
      要安装Tailwind CSS，通常会通过npm进行：<\/p>
      npm install tailwindcss postcss autoprefixer\n<\/code><\/pre>
      然而，Laravel Mix（与Laravel一起提供）是一个包裹Webpack的工具，简化了整个构建过程。要将Tailwind集成到Laravel Mix中，您可以使用Tailwind CSS Laravel预设：<\/p>
      npm install laravel-frontend-presets\/tailwindcss --dev\n<\/code><\/pre>
      在安装预设后，可以使用Laravel提供的Artisan命令行工具来应用它：<\/p>
      php artisan ui tailwindcss --auth\n<\/code><\/pre>
      对不起，您的问题不太清楚。您可以重新描述一下吗？--auth<\/code>旗帜是可选的，但包括它将为基本身份验证视图提供使用 Tailwind CSS 样式的基础结构。一旦 Artisan 完成编译，您就可以自定义您的 CSS 了。<\/p>
      npm run dev\n<\/code><\/pre>
      该命令使用 Laravel Mix 处理您的 CSS 文件并将其输出保存到。public<\/code>拨号盘。<\/p>
      为您的项目设置Tailwind。<\/h2>
      下一步是根据项目需求配置Tailwind。使用Tailwind CLI创建一个尾部样式配置文件：<\/p>
      npx tailwindcss init\n<\/code><\/pre>
      这将会创建一个tailwind.config.js<\/code>请将文件保存到项目根目录，以便您可以自定义Tailwind的默认配置。此外，您可能还需要配置一些选项。purgecss<\/code>要移除未使用的样式并减少CSS文件的大小：<\/p>
      \/\/ tailwind.config.js\nmodule.exports = {\n  purge: [\n    '.\/resources\/**\/*.blade.php',\n    '.\/resources\/**\/*.js',\n    '.\/resources\/**\/*.vue',\n  ],\n  \/\/ other configurations\n};\n<\/code><\/pre>
      请务必列出所有使用Tailwind CSS类的路径，以确保无遗漏。purgecss<\/code>它不会去除你需要的样式。<\/p>
      撰写第一个使用Tailwind CSS的Laravel页面<\/h2>
      现在，让我们创建一个新的Blade视图并添加一些Tailwind类。在新视图中，请稍等片刻。resources\/views\/welcome.blade.php<\/code>：<\/p>
      <!-- resources\/views\/welcome.blade.php -->\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <link href=\"{{ asset('css\/app.css') }}\" rel=\"stylesheet\">\n  <title>Welcome to Laravel with Tailwind CSS<\/title>\n<\/head>\n<body>\n  <h1 class=\"text-4xl font-bold text-center text-blue-500 mt-20\">Welcome to Laravel with Tailwind CSS!<\/h1>\n<\/body>\n<\/html>\n<\/code><\/pre>
      这种观点将编译后的Tailwind CSS与应用实用类样式到元素中关联起来。请继续运行：<\/p>
      npm run dev\n<\/code><\/pre>
      高级定制化<\/h2>
      Tailwind 是高度可定制的。你可以添加新的实用工具、组件和插件来扩展其功能。让我们看一个例子，我们创建了一个自定义按钮组件：<\/p>
      \/\/ resources\/css\/components\/buttons.css\n@tailwind components;\n\n.btn {\n  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;\n}\n\n.btn:hover {\n  @apply bg-blue-700;\n}\n<\/code><\/pre>
      在定义自定义组件后，将其导入到主CSS文件中：<\/p>
      \/\/ resources\/css\/app.css\n@import 'tailwindcss\/base';\n@import 'tailwindcss\/components';\n@import 'tailwindcss\/utilities';\n@import '.\/components\/buttons.css';\n<\/code><\/pre>
      结论。<\/h2>
      整合Tailwind CSS与Laravel是一项简单的过程，可以显著加快前端开发速度，而不牺牲自定义性。使用Laravel Mix和Tailwind的预设，您可以在您的Laravel应用中迅速启动基于实用类的CSS框架。请记住要个性化配置以使Tailwind的广泛实用类适用于流畅的最终用户体验。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
      \r\n
      \r\n
      \r\n
      \r\n
      \r\n
      \"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
      长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
      \r\n
      \r\n
      Tailwind CSS 是一个用于简化前端开发的 CSS 框架，它与 Laravel 的一些特性完美结合，可以极大地提高开发效率和用户体验。以下是如何在 Laravel 中使用 Tailwind CSS 的步骤：<\/p>\n
      步骤 1: 安装 Tailwind<\/h3>\n
      首先，确保你的项目已安装 Composer。然后，运行以下命令来安装 Tailwind:<\/p>\n
      composer require tailwindlabs\/tailwindcss<\/code><\/pre>\n
      或者如果你使用的是 composer.json 文件:<\/p>\n
      {\n    \"require\": {\n        \"tailwindlabs\/tailwindcss\": \"^2.0\"\n    }\n}<\/code><\/pre>\n
      步骤 2: 添加 Tailwind 风格到你的 .env<\/code> 文件<\/h3>\n
      将 Tailwind 的路径添加到 .env<\/code> 文件中，以便可以在 Laravel 中引用它。<\/p>\n
      # 在 .env 文件中添加 Tailwind 链接\nAPP_NAME=MyApp\nAPP_ENV=local\nAPP_KEY=your-key\nDB_CONNECTION=mysql\nDB_HOST=database.example.com\nDB_PORT=3306\nDB_DATABASE=example_database\nDB_USERNAME=root\nDB_PASSWORD=\nTWAIND_DIR=\/path\/to\/your\/tailwind<\/code><\/pre>\n
      这里，TWAIND_DIR<\/code> 是 Tailwind 的根目录位置，你需要将其替换为实际的路径。<\/p>\n
      步骤 3: 编辑 Laravel 应用程序文件<\/h3>\n
      打开你的 Laravel 应用程序的 resources\/css\/app.css<\/code> 文件，并删除任何不必要的样式。然后添加 Tailwind 部分。<\/p>\n
      @import 'tailwindcss\/base';\n@import 'tailwindcss\/components';\n@import 'tailwindcss\/utilities';\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}<\/code><\/pre>\n
      步骤 4: 使用 Tailwind CSS<\/h3>\n
      现在你可以开始使用 Tailwind CSS 来定义样式了。例如，假设你想为按钮添加背景颜色和边框：<\/p>\n
      <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">\n  Click me!\n<\/button><\/code><\/pre>\n
      在这个例子中，我们使用了 bg-blue-500<\/code> 和 py-2<\/code> 来定义按钮的背景色和高度。<\/p>\n
      通过这种方式，你可以轻松地在 Laravel 中集成 Tailwind CSS，使其成为开发过程中的一部分。希望这对你有帮助！<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Bug编译狮 在 Laravel 中使用 Tailwind CSS 可以显著提高开发效&#295..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-773","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=773"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=773"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=773"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}