tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css
CSS is a technology that can be your best or worst friend. While it's incredibly flexible and can produce what seems like magic, without the proper care and attention, it can become hard to manage like any other code.
CSS是一種可以成為您最好或最壞朋友的技術。 盡管它非常靈活并且可以產生看似魔術的效果，但是如果沒有適當的注意和注意，它就會像其他任何代碼一樣變得難以管理。
How can Tailwind CSS help us to take control of our styles?
Tailwind CSS如何幫助我們控制樣式？
What is Tailwind?
什么是尾風？
So what makes Tailwind great?
那么，什么使Tailwind很棒呢？
Part 1: Adding Tailwind CSS to a static HTML page
第1部分：將Tailwind CSS添加到靜態HTML頁面
Part 2: Adding Tailwind CSS to a React app
第2部分：將Tailwind CSS添加到React應用
什么是尾風？ (What is Tailwind?)
Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.
Tailwind CSS是“實用程序至上”CSS框架，提供了CSS類和工具的深入目錄，可讓您輕松開始設計網站或應用程序的樣式。
The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.
基本目標是，在構建項目時，您無需處理層疊樣式，也不必擔心如何覆蓋過去兩年困擾您的應用程序的10選擇器堆積。
那么，什么使Tailwind很棒呢？ (So what makes Tailwind great?)
Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.
Taildwind的解決方案是提供各種CSS類，每個CSS類都有自己的重點用途。 在Tailwind中，可以直接應用一堆bg-blue-500 py-2 px-4 rounded之類的類，而不是直接使用一堆CSS屬性創建的名為.btn的類，或者將其構建為.btn類，方法是將那些實用程序類應用于該選擇器。
While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!
盡管Tailwind還有很多其他功能，但在本教程中我們將重點關注這些基礎知識，因此讓我們深入研究吧！
第1部分：將Tailwind CSS添加到靜態HTML頁面 (Part 1: Adding Tailwind CSS to a static HTML page)
We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.
我們將從直接將Tailwind CSS應用于靜態HTML頁面開始。 希望是，通過專注于Tailwind而非應用程序，我們可以更好地了解框架實際發生的情況。
步驟1：建立新網頁 (Step 1: Creating a new page)
You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.
您可以通過簡單地創建一個新HTML文件來開始使用。 對于內容，您可以使用任何想要的內容，但是我將使用fillerama.io，這樣填充物的內容會更有趣。
If you want to simplify this step, you can just copy the file I created to get started.
如果您想簡化此步驟，則只需復制我創建的文件即可上手。
Follow along with the commit!
跟隨提交！
步驟2：通過CDN添加Tailwind CSS (Step 2: Adding Tailwind CSS via CDN)
Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.
Tailwind通常建議您通過npm安裝以獲得完整的功能，但是，再次，我們只是試圖首先了解它的工作原理。
So let's add a link to the CDN file in the <head> of our document:
因此，讓我們在文檔的<head>中添加指向CDN文件的鏈接：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!
保存并重新加載頁面后，您會注意到的第一件事是所有樣式都被剝離了！
This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.
這是預期的。 Tailwind包含一組預檢樣式，以解決跨瀏覽器的不一致問題。 首先，它們包括流行的normalize.css ，它們以自己的樣式構建。
But we're going to learn how to use Tailwind to add back our styles and set things up how we want!
但是，我們將學習如何使用Tailwind重新添加樣式并設置所需的樣式！
Follow along with the commit!
跟隨提交！
步驟3：使用Tailwind CSS向頁面添加樣式 (Step 3: Using Tailwind CSS to add styles to your page)
Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.
現在我們已經安裝了Tailwind，我們已經添加了使用它們龐大的實用程序類庫的功能，現在將使用它們來將樣式添加回我們的頁面。
Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:
首先，為所有段落( <p> )和列表元素( <ol> ， <ul> )添加一些邊距。 我們可以通過將.my-5類添加到每個元素來做到這一點，如下所示：
<p class="my-5">Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…Belligerent and numerous. </p>The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.
類名遵循其他實用程序類會注意到的模式.my-5代表應用于y軸(y)的邊距(m)，其值為5，在Tailwind的情況下，它使用rem ，因此值為5rem。
Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:
接下來，讓我們的標題看起來像實際的標題。 從h1標簽開始，讓我們添加：
<h1 class="text-2xl font-bold mt-8 mb-5">Here's what's happening:
這是正在發生的事情：
text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
text-2xl ：將文本大小(字體大小)設置為2xl。 在Tailwind中，那2xl等于1.5rem
font-bold: set the weight of the text (font-weight) to bold
font-bold ：將文本的粗細(font-weight)設置為粗體
mt-8: Similar to my-5, this will set the margin top (t) to 8rem
mt-8 ：與my-5相似，這會將邊距最高(t)設置為8rem
mb-5: And this will set the margin bottom (b) to 5rem
mb-5 ：這會將邊距下限(b)設置為5rem
With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:
將這些類添加到h1 ，讓我們將這些完全相同的類應用于其余的標頭元素，但是當我們在列表中向下移動時，請減小字體大小的大小，因此它將如下所示：
h2: text-xl
h2： text-xl
h3: text-lg
h3： text-lg
Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:
現在，讓我們的列表元素看起來像列表。 從我們的無序列表( <ul> )開始，讓我們添加以下類：
<ul class="list-disc list-inside my-5 pl-2">Here's what we're adding:
這是我們要添加的內容：
list-disc: set the list-style-stype to disc (the markers on each line item)
list-disc ：將list-style-stype設置為disc(每個訂單項上的標記)
list-inside: sets the position of the list markers using ?relative to the list items and the list itself with list-style-position to inside
list-inside ：使用相對于列表項的列表標記的位置以及帶有list-style-position的列表本身的位置
my-5: set the margin of the y axis to 5rem
my-5 ：將y軸的邊距設置為5rem
pl-2: set the left padding to 2rem
pl-2 ：將左填充設置為2rem
Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.
然后，我們可以將完全相同的類應用于有序列表( <ol> )，除了要代替list-disc ，我們希望將樣式類型更改為list-decimal ，以便我們可以看到有序列表的數字。
<ol class="list-decimal list-inside my-5 pl-2">And we have our lists!
我們有清單！
Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:
最后，通過設置最大寬度并將內容居中，讓我們的內容更容易閱讀。 在<body>標記上，添加以下內容：
<body class="max-w-4xl mx-auto">/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/
/注意：通常，您不想將這些類應用于<body>本身，而是可以使用<main>標記包裝所有內容，但是由于我們只是試圖了解如何實現此目的可以，我們將繼續進行。 如果愿意，可以隨意在這些類中添加<main>標記！
And with that, we have our page!
至此，我們有了我們的頁面！
Follow along with the commit!
跟隨提交！
步驟4：添加按鈕和其他組件 (Step 4: Adding a button and other components)
For the last part of our static example, let's add a button.
對于靜態示例的最后一部分，讓我們添加一個按鈕。
The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.
Tailwind的訣竅在于，它們故意不提供預烘焙的組件類，因為這樣的想法是人們可能仍需要重寫這些組件以使其看起來像他們想要的那樣。
So that means, we're going to have to create our own using the utility classes!
因此，這意味著我們將必須使用實用程序類創建自己的類！
First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:
首先，讓我們添加一個新按鈕。 在頁面的某處，添加以下代碼段。 我將其添加到第一段( <p> )標簽的正下方：
<button>Party with Slurm!</button>You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.
與所有其他元素一樣，您會注意到它沒有樣式設置，但是，如果嘗試單擊它，則會注意到它仍然具有單擊操作。 因此，讓它看起來像一個按鈕。
Let's add the following classes:
讓我們添加以下類：
<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">Party with Slurm! </button>Here's a breakdown of what's happening:
這是正在發生的事情的分解：
text-white: we're setting our text color to white
text-white ：我們將文本顏色設置為白色
font-bold: set the weight of the text to bold (font-weight)
font-bold ：將文本的粗細設置為粗體(font-weight)
bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
bg-purple-700 ：將按鈕的背景色設置為紫色(陰影為700)。700相對于定義為紫色的其他顏色，您可以在其調色板文檔頁面上找到這些值。
hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
hover:bg-purple-800 ：當有人將鼠標懸停在按鈕上時，將背景顏色設置為紫色陰影800。Tailwind提供了這些幫助程序類，這些類使我們能夠輕松地定義帶有懸浮，焦點和活動修改器之類的交互式階梯
py-2: set the padding of the y-axis to 2rem
py-2 ：將y軸的填充設置為2rem
px-4: set the padding of the ?x-axis to 4rem
px-4 ：將x軸的填充設置為4rem
rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem
rounded ：通過設置邊界半徑來圓角元素的角。 使用順風時，它將邊界半徑值設置為.25rem
And with all of that, we have our button!
除此之外，我們還有按鈕！
You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.
您可以將此方法應用于您要構建的任何其他組件。 盡管這是一個手動過程，但我們將發現在構建更多動態項目(如基于React的項目)時，如何使該過程變得更容易。
Follow along with the commit!
跟隨提交！
第2部分：將Tailwind CSS添加到React應用 (Part 2: Adding Tailwind CSS to a React app)
For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.
對于更多實際使用案例，我們將Tailwind CSS添加到使用Create React App創建的應用程序中 。
First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.
首先，我們將逐步介紹使用全新安裝的Create React App向項目添加順風車的步驟，然后使用上一個示例中的內容在React中重新創建它。
第1步：啟動一個新的React應用 (Step 1: Spinning up a new React app)
I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.
我不會詳細說明這一步驟。 要點是，我們將使用Create React App引導一個新的React應用程序。
To get started, you can follow along with the directions from the official React documentation:
要開始，你可以跟著同方向從官方文件做出React：
https://reactjs.org/docs/create-a-new-react-app.html
https://reactjs.org/docs/create-a-new-react-app.html
And once you start your development server, you should now see an app!
啟動開發服務器后，您現在應該看到一個應用程序！
Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.
最后，讓我們將所有舊內容遷移到我們的應用程序。 為此，請在靜態示例的<body>標記內復制所有內容，并將其粘貼到新的React項目中的包裝器<div className="App">內。
Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:
接下來，將所有class="屬性從我們粘貼的內容更改為className="以便使用正確的React屬性：
And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.
最后，將包裝器<div>上的className App替換為我們在靜態<body>上使用的類。
Once you save your changes and spin back up your server, it will look deceivingly okay.
保存更改并重新啟動服務器后，它看起來似乎還可以。
React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!
React本身包含一些基本樣式，因此盡管看起來還不錯，但我們實際上還沒有使用Tailwind。 因此，讓我們開始安裝它！
Follow along with the commit!
跟隨提交！
第2步：在React應用中安裝Tailwind (Step 2: Installing Tailwind in your React app)
There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.
為了使Tailwind啟動并在我們的應用程序上運行，我們需要執行幾個步驟。 確保仔細執行以下步驟，以確保其配置正確。
First, let's add our dependencies:
首先，讓我們添加依賴項：
yarn add tailwindcss postcss-cli autoprefixer # or npm install tailwindcss postcss-cli autoprefixerPer Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:
根據Tailwind的文檔 ，我們需要能夠處理樣式，以便可以將其正確添加到我們的管道中。 因此，在上面，我們添加：
tailwindcss: the core Tailwind package
tailwindcss ：核心Tailwind軟件包
postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
postcss-cli ：Create React App已經使用postcss了，但是我們需要配置Tailwind作為該構建過程的一部分并運行它自己的處理
autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration
autoprefixer ：Tailwind不包含供應商前綴，因此我們想添加autoprefixer來為我們處理。 這是我們postcss配置的一部分
We're also going to add two dev dependencies that make it easier to work with our code:
我們還將添加兩個dev依賴項，以使其更易于使用我們的代碼：
yarn add concurrently chokidar-cli -D # or npm install concurrently chokidar-cli --save-devconcurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
并發 ：一個軟件包，使我們可以設置一次運行多個命令的功能。 這很有用，因為我們需要同時觀察樣式和React應用本身。
chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge
chokidar-cli ：讓我們觀看文件并在更改后運行命令。 我們將使用它來觀看我們CSS文件并在cahnge上運行CSS的構建過程
Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:
接下來，讓我們配置postcss，因此在項目的根目錄中創建一個名為postcss.config.js的新文件，并包含以下內容：
// Inside postcss.config.js module.exports = {plugins: [require('tailwindcss'),require('autoprefixer')], };This will add the Tailwindcss and Autoprefixer plugins to our postcss config.
這會將Tailwindcss和Autoprefixer插件添加到我們的postcss配置中。
With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:
使用我們的配置，我們需要將其作為構建和監視過程的一部分。 在package.json內部，將以下內容添加到您的scripts屬性中：
"build:css": "tailwind build src/App.css -o src/index.css", "watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",Additionally, modify the start and build scripts to now include those commands:
此外，修改start腳本和build腳本以現在包括以下命令：
"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'", "build": "npm run build:css && react-scripts build",With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.
準備好我們的配置后，讓我們嘗試將樣式恢復為與靜態示例分開時的樣式。
Inside the App.css file, replace the entire content with:
在App.css文件中，將整個內容替換為：
@tailwind base; @tailwind components; @tailwind utilities;This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.
這將導入Tailwind的基本樣式，組件和實用程序類，這些樣式，組件和實用程序類使Tailwind能夠按預期工作。
We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:
我們還可以從App.js文件中刪除App.css導入，因為現在它已直接注入到我們的index.css文件中。 因此刪除此行：
import './App.css';Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.
完成后，就可以開始備份開發服務器了！ 如果已經啟動，請確保重新啟動它，以便所有配置更改均生效。
And now the page should look exactly like it did in our static example!
現在，該頁面應該看起來像在我們的靜態示例中一樣！
Follow along with the commit!
跟隨提交！
步驟3：使用Tailwind創建一個新的按鈕組件類 (Step 3: Creating a new button component class with Tailwind)
Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!
Tailwind并未附帶預烘焙的組件類，但它確實使創建它們變得容易！
We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.
我們將使用已經創建的按鈕作為創建新組件的示例。 我們將創建一個新的btn類以及一個顏色修改器btn-purple來完成此任務。
The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:
我們要做的第一件事是打開App.css文件，在其中創建新類。 在該文件中，我們添加：
.btn {@apply font-bold py-2 px-4 rounded; }If you remember from our HTML, we're already including those same classes to our <button> element. ?Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.
如果您還記得我們HTML，我們已經將這些相同的類包含在<button>元素中。 Tailwind讓我們“應用”或將構成這些實用程序類的樣式包括在另一個類(在本例中為.btn類)中。
And now that we're creating that class, let's apply it to our button:
現在，我們正在創建該類，現在將其應用于按鈕：
<button className="btn text-white bg-purple-700 hover:bg-purple-800">Party with Slurm! </button>And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.
如果打開頁面，我們可以看到我們的按鈕看起來仍然一樣。 如果檢查元素，則可以看到使用這些樣式生成的新.btn類。
Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:
接下來，讓我們創建一個顏色修改器。 與我們剛才所做的類似，我們將添加以下規則：
.btn-purple {@apply bg-purple-700 text-white; }.btn-purple:hover {@apply bg-purple-800; }Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.
在這里，我們將背景色和文本色添加到按鈕類中。 當有人將鼠標懸停在按鈕上時，我們還會應用較深的按鈕顏色。
We'll also want to update our HTML button to include our new class and remove the ones we just applied:
我們還希望更新HTML按鈕以包括我們的新類，并刪除剛剛應用的類：
<button className="btn btn-purple">Party with Slurm! </button>And with that change, we can still see that nothing has changed and we have our new button class!
有了這一更改，我們仍然可以看到沒有任何更改，并且我們有了新的按鈕類！
Follow along with the commit!
跟隨提交！
將這些概念應用于更多組件 (Applying these concepts to more components)
Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.
通過本演練，我們學習了如何使用Tailwind apply指令創建新的組件類。 這使我們可以創建可重用的類，以表示類似于按鈕的組件。
We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.
我們可以將其應用于設計系統中的任何數量的組件。 例如，如果我們希望始終以在此處設置列表的方式顯示列表，則可以創建一個.list-ul類，該類使用Tailwind實用程序list-disc list-inside my-5 pl-2表示無序列表。 。
您想與Tailwind一起使用哪些提示和技巧？ (What tips and tricks do you like to use with Tailwind?)
Share with me on Twitter!
在Twitter上與我分享！
🐦 Follow Me On Twitter
Twitter在Twitter上關注我
📽? Subscribe To My Youtube
Subscribe?訂閱我的YouTube
?? Sign Up For My Newsletter
??注冊我的時事通訊
翻譯自: https://www.freecodecamp.org/news/what-is-tailwind-css-and-how-can-i-add-it-to-my-website-or-react-app/
tailwind css
總結
以上是生活随笔為你收集整理的tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到大蟒蛇了有什么兆头
- 下一篇： 梦到自己头发快掉秃了怎么回事