1. 首页
  2. Laravel

Laravel新闻与Tailwind CSS见面

你可能还没有注意到,但是Laravel新闻网站刚刚有了新的内容。我们刚刚推出了一个完整的一对一的CSS重构使用尾灯CSS引擎盖下!该项目的目标是使实现设计更改和向站点添加新内容变得更容易。
什么是Tailwind CSS?Tailwind CSS是由Adam Wathan、Jonathan Reinink、David Hemphill和史提夫Schoger构建的实用程序优先的CSS框架。它带走了我们所知道的关于编写有组织的、可维护的CSS的一切,并将其抛诸脑后。Tailwind使用postss生成数千个实用程序类,然后可以使用这些类直接在标记中设置HTML的样式。这允许一个快速的开发过程和很少的定制编写的CSS。
h2>从Laravel Elixir升级到Laravel Mix
为了开始这个项目,我首先将代码库从Laravel Elixir升级到Laravel Mix。与Elixir相比,Mix有许多好处,其中一些好处是:
–在引擎盖下使用Webpack
–更易于配置
–当前支持的版本升级到Mix是一个简单的过程。Elixir只是编译CSS,合并一些JavaScript文件,并对主要的JavaScript和CSS文件进行版本控制。几乎所有我要做的就是通过npm安装Mix,更新中的scripts部分包.json,并将配置从:
1// gulpfile.js 2 3var> 4 5elixir(function(mix) { 6mix 7.sass(\”all.scss\”, \”public/assets/css/all.css\”) 8.scripts( 9[10// … script files11],12\”public/assets/js/app.js\”13)14.version([\”/assets/css/all.css\”, \”assets/js/app.js\”]);15});
更改为:
1// webpack.mix.js 2> 4 5mix 6.sass(\”resources/assets/sass/all.scss\”, \”public/assets/css/all.css\”) 7.scripts( 8[ 9// … script files10],11\”public/assets/js/app.js\”12);1314if (mix.inProduction()) {15mix.sourceMaps().version();16}设置尾风
该过程的下一步是设置尾风。为了开始,我必须通过npm安装Tailwind并对Laravel Mix的配置做一些修改。在安装了Tailwind之后,我在我的webpack.mix.js文件中添加了以下代码。
1mix2.sass(\”resources/assets/scss/tailwind.scss\”, \”public/assets/css\”)3.options({4postCss: [tailwindcss(\”./tailwind.js\”)]5});
接下来,我创建了tailwind.css文件,其中包含以下内容:
1@tailwind preflight;23@tailwind components;45@tailwind utilities;
Tailwind通过其配置文件提供了极大的可定制性。要生成默认配置文件,只需运行./node_modules/bin/tailwind init tailwind.js,它将在项目的根目录下创建tailwind.js文件。在这里,您可以配置从颜色到边距和填充大小,甚至是响应断点的所有内容。
感谢Zaengle的团队为我留下了一个惊人的Sass代码库。它基于一个称为Bourbon的轻量级Sass框架,组织得非常好。在这一点上,用Sass变量中的值替换默认的顺风配置对我来说非常简单。我很快将字体大小、颜色和间距复制到tailwind.js文件中,为tailwind.scss添加了一些标题和段落的基本默认样式,然后我就可以开始了!为了开始真正的工作,我首先用Laravel Mix编译的新的tailwind.css文件替换最初加载的CSS文件。这去掉了所有的造型,所以我从零开始。然后,我在body标签中添加了一些基本类,bg-off-white font-sans text-base text-grey-darker leading-loose。然后我转到导航。在移动和桌面布局中使用相同的HTML总是有点困难,这里没有什么可以帮助您的。我花了一段时间才把导航部分转换过来,我不得不编写一些自定义的CSS来使它变得完美。Tailwind目前没有一种方法来定位伪选择器,所以我不得不在我的tailwind.scss文件中添加以下内容:
1@screen md {2.nav-container::after {3content: \”\”;4height: 2px;5top: 66px;6@apply .absolute .w-full .pin-l .bg-off-white;7}8}
现在,您可能会注意到CSS中混合了一些奇怪的语法。@apply和@screen指令是Tailwind的两个特性,它们在您编写自定义CSS时提供了帮助。您可以在这里阅读更多关于Tailwind的自定义指令。@apply允许您将\”Tailwind\”的实用程序类\”应用\”到自定义类中,以便可以重用Tailwind配置文件中的颜色和大小。这使您的设计在整个网站上保持良好和一致。@screen指令使用传递的宽度作为参数,向下编译为常规媒体查询。该代码示例编译如下:
1@media (min-width: 750px) { 2.nav-container::after { 3content: \”\”; 4height: 2px; 5top: 66px; 6position: absolute; 7width: 100%; 8left: 0; 9background-color: #f5f5f5;10}11}
完成导航后,我转到主页的其余部分。我浏览了每个部分并重新设计了标记,以尽可能地与旧设计匹配。每当我在做正确的事情上遇到困难时,我都会从旧代码中寻找源代码,看看以前是怎么做的。
当我浏览每一页时,我开始注意到我反复使用的某些类集。主页上的卡片就是一个很好的例子。在重复这些类几次之后,我决定在自定义CSS中为它们提取组件。利用顺风,提取组件很容易。只需复制应用于元素的类,并使用@apply指令将所有这些类应用于.card这样的单个类。下面是我创建的一些自定义类的示例:
1.card { 2margin: 15px0; 3width: calc(100%-30px); 4@apply .text-white .bg-white .rounded-sm .overflow-visible .shadow-sm .self-stretch; 5} 6 7.card.card__image { 8max-height: 150px; 9@apply .flex .items-start .justify-center .rounded-t-sm .overflow-hidden .bg-grey-lighter;10}1112.card.card__imageimg {13@apply .w-full .flex-1 .block .rounded-t-sm .transition;14}1516.card:hover.card__imageimg {17@apply .opacity-75;18}
当我访问博客页面时,我不得不稍微更改一下工作流。因为帖子内容是从数据库加载的,所以我无法

Laravel新闻与Tailwind CSS见面 为WP2原创文章,链接:https://www.wp2.cn/laravel/laravel%e6%96%b0%e9%97%bb%e4%b8%8etailwind-css%e8%a7%81%e9%9d%a2/