十大顺风CSS插件

原文:https://www.geeksforgeeks.org/top-10-tailwind-css-plugins/

Tailwind CSS: 这被称为实用优先的 CSS 框架，用于构建自定义 UI 这是一个非常可定制的低级 CSS 框架，gIt 为您提供了构建模块，帮助您构建出色的设计，而没有任何烦人的风格。

排名前十的顺风 CSS 插件如下:

1。顺风 CSS 排版:

• If you want to design the style of an article or document, or it may be a blog post. With the help of the wind, this is very difficult, which requires more attention to typesetting and a large number of complicated customized CSS.


• This feature helps to build applications on their front end, because you spend very little time on component modeling.

可以通过以下命令下载:

// Using npm
npm install @tailwindcss/typography
// Using Yarn
yarn add @tailwindcss/typography.


2。顺风 CSS 自定义表单:

• The tailwind CSS custom form is used to provide a better appearance, and by adding some utilities


• To help provide better customization for easily customizing and making better forms.

可以通过以下命令下载:

// Using npm
npm install @tailwindcss/custom-forms --save-dev
// Using Yarn
yarn add @tailwindcss/custom-forms -D


3。顺风 css 表格插件:

• This plug-in is used to create a guide table in downwind CSS.


• Inherit in Bootstrap, with the help of which the nested table can be made the same as the parent table.

可以通过以下命令下载:

// With using NPM
npm install tailwindcss-tables --save
// With usingYarn
yarn add tailwindcss-tables


4。顺风 CSS 主题化插件:

• Downwind theming is a CSS plug-in that is responsible for changing multiple themes in the website.


• Generally used to make dark themes in websites.

可以通过以下命令下载:

$ yarn add tailwindcss-theming@next --dev


5。顺风 CSS 截断多行:

• It is helpful when we want to truncate the text inside some cards and realize that it may be difficult to do this with CSS alone.


• For this, we can use Tailwind CSS, which is a veterinary plug-in for customization. The element it use to truncate multiline text is that addition class. Truncate-key-line, where the key is the number of lines displayed before truncation.

您可以通过以下命令下载它:

// With using npm
npm install tailwindcss-truncate-multiline --save
// With using yarn
yarn add tailwindcss-truncate-multiline


6。顺风 CSS-Elevation:

• This plug-in provides the elevation angles of two different images or components.


• Whenever you want to apply elevation, you need to use. Elevation utilities.


• This is a basic example of adding CSS elevation to button . Click me! 按钮>

可以通过以下命令下载:

npm install tailwindcss-elevation


7。顺风 CSS 长宽比:

• This type of plug-in is created before the aspect ratio and is supported by any browser.


• This plug-in requires downwind CSS 1.2 or higher. It offers customized sizes in different shapes.


• This plug-in uses the configured theme and variant objects to create the aspect ratio utility.

可以通过以下命令下载:

npm install tailwindcss-aspect-ratio


8。 顺风 CSS 渐变:

• This plug-in can help you provide a very smooth transition between the two added colors.


• These plug-ins are regularly updated by developers.

可以通过以下命令下载:

npm install tailwindcss-gradients


9。 顺风 CSS 调试屏幕:

• The downwind CSS debugging screen is a plug-in that displays response breakpoints.


• You can easily customize a theme and debug the tailwind.config.js file.


• You can set debugger options to easily find breakpoints.

可以通过以下命令下载:

npm install tailwindcss-debug-screens --save-dev


10。顺风 CSS Spinner:

• All network applications need an old one to load data, so the downwind CSS Spinner is a loader that can be easily customized according to user's needs. You can also change its color, size, width and so on according to your requirements.


• Can be used with a single utility class.

// With using yarn
yarn add -D tailwindcss-spinner
// With using npm
npm install --save-dev tailwindcss-spinner