This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

What is Tailwind CSS

Tailwind CSS is a feature-first CSS framework that integrates classes such as Flex, PT-4, Text-center and rotate-90, which can be combined directly in scripting markup language to build any design.

How to install Tailwind CSS

For most projects (and to take advantage of Tailwind’s customization capabilities), you will need to install Tailwind and its dependencies through NPM. Install Tailwind via NPM

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Copy the code

Since Tailwind does not automatically add the browser engine prefix to the generated CSS, we recommend that you install Autoprefixer to handle this issue, as shown in the code snippet above.

If you integrate Tailwind with a tool that relies on older versions of PostCSS, you may see the following error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Copy the code

In this case, you should install the PostCSS 7 compatibility version.

Tailwind CSS features

  • Feature class first: Build complex components from a constrained set of original feature classes. Traditionally, CSS has been written whenever you need to style a web page. With Tailwind, you can style elements by applying pre-existing classes directly to THE HTML.

  • Responsive design: Use responsive functional variants to build adaptive user interfaces. Each feature class in Tailwind can be applied conditionally to different breakpoints, making it easy for you to build complex responsive interfaces without leaving HTML.

  • Hover, focus, and other states: Use function classes to style elements in hover, focus, and other states.

  • Add new feature classes: Extend Tailwind with your custom feature classes.

  • Functions and instructions: A reference to the functions and instructions that Tailwind exposes to your CSS.

Tailwind the base style of the CSS

Preflight: An arbitrary set of base styles preset for Tailwind projects

Based on modern-Normalize, Preflight is a set of basic styles for Tailwind projects designed to eliminate cross-browser inconsistencies and make your work easier to fit into the constraints of your design system.

When you include @tailwind base in your CSS, Tailwind will automatically inject the following styles:

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;
Copy the code

How to use Tailwind CSS (table as an example)

Table borders: A feature class that controls whether table borders should be folded or separated.

Class Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

Collapse

Where possible, use border-collapse to merge adjacent cell borders into a single border. Note that this includes folding the border on the top

tag.

<table class="border-collapse border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>
Copy the code

Separate

Use border-separate to force each cell to display its own separate border.

<table class="border-separate border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>
Copy the code