tailwindcss模板_如何开始使⽤TailwindCSS
tailwindcss模板
TailwindCSS is an awesome utility-first CSS library for creating beautiful layouts with less customized CSS.
TailwindCSS是⼀个很棒的实⽤程序优先CSS库，⽤于使⽤较少的⾃定义CSS创建美观的布局。
There's a good chance you've heard about Tailwind. But, have you tried using it?
您很有可能听说过Tailwind。 但是，您是否尝试过使⽤它？
In this article, I'll share the things that make Tailwind different from other component libraries I know. And I'll discuss why you should start using it.
在本⽂中，我将分享使Tailwind与我所知道的其他组件库不同的内容。 我将讨论为什么您应该开始使⽤它。
Note that everything here is my opinion. I'm not saying I've used all the component libraries in the world, lol.
请注意，这⾥的⼀切都是我的意见。 我并不是说我已经使⽤了世界上所有的组件库，哈哈。
TailwindCSS之前 (Before TailwindCSS)
...there were component libraries like Bootstrap and Material UI, to name a few. These libraries come with a set of pre-defined components. For instance, the most common (or heard of) is probably PrimaryButton.
...有⼀些组件库，例如Bootstrap和Material UI，仅举⼏例。 这些库带有⼀组预定义的组件。 例如，最常见(或听说过)的可能
是PrimaryButton 。
These libraries reduce the hassle of designing elements from scratch with CSS. Most of these libraries also do an amazing job of making the components customizable by the user, so that they do not have to stick to the creator's decisions.
这些库减少了使⽤CSS从头开始设计元素的⿇烦。 这些库中的⼤多数库在使组件可由⽤户⾃定义⽅⾯也做得⾮常出⾊，因此它们不必遵循创建者的决定。
However, this customizability most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.
但是，这种可定制性⼤多数时候都涉及覆盖。 例如，创建新类以覆盖库提供的现有样式。
This is not a big issue per se (depending on the user, for me it is), but you still have to go with the "Do I like the way this is styled? No. Let me overwrite it" kind of flow.
这本⾝并不是⼀个⼤问题(取决于⽤户，对我来说是这样)，但是您仍然必须遵循“我喜欢这种样式的样式吗？不。让我覆盖它”这样的流程。
Some developers may see these already made components as just what they need. But creators cannot always make something perfect for every user. Thankfully, as stated earlier, they do a great job of making the components customizable.
⼀些开发⼈员可能认为这些已经制造的组件正是他们所需要的。 但是创作者不能总是为每个⽤户提供完美的作品。 幸运的是，如前所述，它们在使组件可定制⽅⾯做得很好。
然后出现了TailwindCSS (Then came TailwindCSS)
Tailwind is a utility-first CSS library. This means that they are focused on utilities. They provide utility classes like borders, colors, background colors, and so on. They don't necessarily define how your component looks. You decide that using different classes they provide.
Tailwind是实⽤程序优先CSS库。 这意味着他们专注于实⽤程序。 它们提供了实⽤程序类，例如边框，颜⾊，背景⾊等。 它们不⼀定定义组件的外观。 您决定使⽤它们提供的不同类。
This is why I love Tailwind. Of course, overwriting styles is still possible here, but that's very rare. The wonderful team behind the product created many classes for different needs. Without the need to overwrite, you can configure the default styles that you want the library to use in the config file. Pretty awesome right?
这就是为什么我喜欢Tailwind。 当然，这⾥仍然可以覆盖样式，但这⾮常少见。 产品背后的优秀团队为不同需求创建了许多类。 ⽆需覆盖，您可以配置希望库在配置⽂件中使⽤的默认样式。 太棒了吧？
If any of these terms do not make sense to you just now, do not worry. We'll get into more detail as we proceed with the article.
如果这些术语中的任何⼀个对您现在还没有意义，请不要担⼼。 在继续本⽂时，我们将更详细地介绍。
实⽤性类的例⼦ (Examples of utitlity classes)
Before we get started using TailWindCSS, let me show you a few classes that make the tool awesome.
在开始使⽤TailWindCSS之前，让我向您展⽰⼀些使该⼯具很棒的类。
rounded: adds a border-radius of 0.25rem to an element.
rounded ：向元素添加0.25rem的border-radius 。
text-gray-400: adds a light gray color (#cbd5e0). 300 adds something lighter and 500, something darker.
text-gray-400 ：添加浅灰⾊( #cbd5e0 )。 300增加较浅的部分，500增加较⿊的部分。
bg-gray-100: adds a light gray (#f7fafc) background color.
bg-gray-100 ：添加浅灰⾊( #f7fafc )背景⾊。
md:text-gray-100: adds a media query for an element such that screen widths greater than or equal t
o the medium screen (768px by default) applies a very light gray (#f7fafc) to the element. Neat yeah?
md:text-gray-100 ：添加对元素的媒体查询，以使屏幕宽度⼤于或等于中等屏幕(默认为768px)将⾮常浅的灰⾊( #f7fafc )应⽤于该元素。 整洁的是吗？
hover:underline: adds an underline to a text when hovered on.
hover:underline ： hover:underline时在⽂本上添加下划线。
xs:text-lg: similar to md.., this applies a media query for an element such that a font size of 1.125rem (by default) is used for an element when the screen width is greater than or equal to the extra small screen (640px by default).
xs:text-lg ：类似于md.. ，它对元素进⾏媒体查询，以便当屏幕宽度⼤于或等于极⼩值时，将对元素使⽤1.125rem的字体⼤⼩(默认情况下)屏幕(默认为640像素)。
mt-20: applies a margin-top of 5rem to an element.
mt-20 ：对元素应⽤5rem的margin-top 。
awesome-responsive: ok, this does not exist
awesome-responsive ：好的，这不存在
All these options are also customizable of course. We'll see that later in this article.
所有这些选项当然也可以⾃定义。 我们将在本⽂后⾯看到。
As seen in the classes, they don't (on their own) determine the final look of an element or the layout of a page. It's their combination by you the developer that determines that. This gives you full control without having to overwrite.
如在类中所见，它们不能(独⽴地)确定元素的最终外观或页⾯的布局。 由开发⼈员决定的是它们的组合。 这使您可以完全控制⽽不必覆盖。
At this point, I want to believe you find TailWindCSS awesome, so let's get started using it.
在这⼀点上，我想相信您会发现TailWindCSS很棒，所以让我们开始使⽤它。
安装与配置 (Installation and configuration)
explains the installation process in detail. For the sake of completeness, I'll share the installation steps here.
详细说明了安装过程。 为了完整起见，我将在这⾥分享安装步骤。
1.使⽤npm安装软件包 (1. Install package with npm)
npm install tailwindcss
2.将Tailwind添加到CSS (2. Add Tailwind to your CSS)
@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
color: purple;
}
@tailwind is not a valid CSS syntax. But, tailwind uses these directives (as they are called) to generate the built CSS. h1 will also be added to the stylesheet as-is.
@tailwind不是有效CSS语法。 但是，顺风使⽤这些指令(称为它们)来⽣成内置CSS。 h1也将原样添加到样式表中。
h1 is not compulsory. I was trying to show you that any other thing can be added.
h1不是强制性的。 我试图向您展⽰可以添加任何其他内容。
3.创建您的配置⽂件 (3. Create your config file)
This step is optional, but it allows you to specify some default values. With this configuration, tailwind will generate the right CSS. Remember I said earlier that overwriting would be minimal as Tailwind allows you to configure your default styles.
此步骤是可选步骤，但是它允许您指定⼀些默认值。 使⽤此配置，顺风将⽣成正确CSS。 记得我之前说过，由于Tailwind允许您配置默认样式，因此覆盖将是最⼩的 。
To create your config file, do this:
要创建您的配置⽂件，请执⾏以下操作：
npx tailwindcss init
npx because tailwind was not installed globally. This way, the local installed package is used.
npx因为未全局安装tailwind。 这样，将使⽤本地安装的软件包。
The above code will create a template config file similar to this:
上⾯的代码将创建⼀个类似于以下内容的模板配置⽂件：
purge: [],
theme: {
extend: {},
},final
variants: {},
plugins: [],
}
explains how to configure the file.
说明了如何配置⽂件。
4.在PostCSS中使⽤Tailwind (4. Using Tailwind with PostCSS)
helps the build process of the tailwind stylesheet output the correct CSS code. In fig.js file, add this:
帮助顺风样式表的构建过程输出正确CSS代码。 在您的fig.js⽂件中，添加以下内容：
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
autoprefixer is also added (a plugin of PostCSS) to add to properties.
autoprefixer也被添加(PostCSS的插件)来添加到属性。
To build your css, run the following:
要构建css，请运⾏以下命令：
npx postcss tailwind.css -o public/style.css
This takes the tailwind.css file (with the directives), and outputs the processed content to the public stylesheet provided.这将获取tailwind.css⽂件(带有伪指令)，并将处理后的内容输出到提供的公共样式表。
Now you're ready to use Tailwind.
现在，您可以使⽤Tailwind。
如何在项⽬中使⽤Tailwind (How to use Tailwind in your project)
With the public stylesheet populated, all pages linked to the stylesheet can use the styles. An example is:
填充公共样式表后，链接到样式表的所有页⾯都可以使⽤样式。 ⼀个例⼦是：
<div
className='flex justify-center mt-10 items-center'
>
<h1 className='text-xl md:text-4xl'>
Hello
</h1>
<button
className='bg-red-300 p-2 rounded mx-20 hover:bg-red-600 hover:text-white'
>
Click me!
</button>
<a
href='google'
className='underline font-bold'
>
Google
</a>
</div>
Here's what the classes are doing for the elements:
这是类对元素进⾏的操作：
flex - display: flex.
flex - display: flex 。
justify-center - justify-content: center.
justify-center - justify-content: center 。
mt-10 - margin-top: 2.5rem
mt-10margin-top: 2.5rem
items-center - align-items: center
items-center - align-items: center
text-xl - font-size: 1.25rem
text-xl font-size: 1.25rem
md:text-xl - md means medium size. The default is 768px but you can change that in the config file.
css怎么创建
md:text-xl -md表⽰中等⼤⼩。 默认值为768px，但您可以在配置⽂件中更改它。
Here's what the class does for you:
这是全班为您服务的内容：
@media only screen and (min-width:768px) {
element {
font-size: 1.25rem;
}
}
bg-red-300 - background-color: #feb2b2
bg-red-300background-color: #feb2b2
rounded - border-radius: 0.25rem

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。