Jump to content

Tailwind CSS: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
m pronoun fix
Tags: Mobile edit Mobile web edit Advanced mobile edit
Line 93: Line 93:
== Prominent uses ==
== Prominent uses ==


* [[GitHub]]{{nbsp}}<ref>{{cite web|url=https://copilot.github.com/|title=GitHub Copilot · Your AI pair programmer|accessdate=2021-10-18| website=GitHub Copilot|language=en}}</ref>
* [[GitHub]]<ref>{{cite web|url=https://copilot.github.com/|title=GitHub Copilot · Your AI pair programmer|accessdate=2021-10-18| website=GitHub Copilot|language=en}}</ref>
* [[Firefox]]{{nbsp}}<ref>{{cite web|url=https://accounts.firefox.com/|title=Firefox Accounts|accessdate=2021-10-18|website=accounts.firefox.com}}</ref>
* [[Firefox]]<ref>{{cite web|url=https://accounts.firefox.com/|title=Firefox Accounts|accessdate=2021-10-18|website=accounts.firefox.com}}</ref>
* [[Netlify]]{{nbsp}}<ref>{{cite web|url=https://www.netlify.com/blog/2021/03/23/from-semantic-css-to-tailwind-refactoring-the-netlify-ui-codebase/|title=From semantic CSS to Tailwind - Refactoring the Netlify UI codebase|accessdate=2021-10-28|website=Netlify|language=en}}</ref>
* [[Netlify]]<ref>{{cite web|url=https://www.netlify.com/blog/2021/03/23/from-semantic-css-to-tailwind-refactoring-the-netlify-ui-codebase/|title=From semantic CSS to Tailwind - Refactoring the Netlify UI codebase|accessdate=2021-10-28|website=Netlify|language=en}}</ref>
* [[NBA]]{{nbsp}}<ref>{{cite web|url=https://www.nba.com/|title=The official site of the NBA for the latest NBA Scores, Stats & News. {{!}} NBA.com|accessdate=2021-10-18|website=www.nba.com|language=en}}</ref>
* [[NBA]]<ref>{{cite web|url=https://www.nba.com/|title=The official site of the NBA for the latest NBA Scores, Stats & News. {{!}} NBA.com|accessdate=2021-10-18|website=www.nba.com|language=en}}</ref>
* [[NASA]]{{nbsp}}<ref>{{cite web|url=https://www.jpl.nasa.gov/|title=NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration|accessdate= 2021-10-18|website=NASA Jet Propulsion Laboratory (JPL)|language=en}}</ref>
* [[NASA]]<ref>{{cite web|url=https://www.jpl.nasa.gov/|title=NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration|accessdate= 2021-10-18|website=NASA Jet Propulsion Laboratory (JPL)|language=en}}</ref>
* [[Netflix]]{{nbsp}}<ref>{{cite web|url=https://top10.netflix.com/|title=Netflix Top 10 - Global|accessdate=2021-11-21|website= top10.netflix.com|language=en}}</ref>
* [[Netflix]]<ref>{{cite web|url=https://top10.netflix.com/|title=Netflix Top 10 - Global|accessdate=2021-11-21|website= top10.netflix.com|language=en}}</ref>


== See also ==
== See also ==


* [[Bootstrap (framework)]]
* [[Bootstrap (framework)]]

⚫
== References ==
⚫
{{Reflist|2}}


== External links ==
== External links ==
Line 108: Line 111:
* [https://tailwindcss.com/docs Official Tailwind Documentation].
* [https://tailwindcss.com/docs Official Tailwind Documentation].
* [https://play.tailwindcss.com Tailwind Play], real-time testing environment.
* [https://play.tailwindcss.com Tailwind Play], real-time testing environment.

⚫
== References ==
⚫
{{Reflist|2}}


[[Category:Web frameworks]]
[[Category:Web frameworks]]

Revision as of 00:50, 29 September 2022

Tailwind CSS
Original author(s)Adam Wathan, Steve Schoger
Developer(s)Tailwind Labs[1]
Stable release
3.4.14[2] Edit this on Wikidata / 15 October 2024
Repository
Written inJavaScript
PlatformWeb
Available inEnglish
LicenseMIT License [3]
Websitetailwindcss.com

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.[4][5]

For example, in other traditional systems, there would be a class message-warning that would apply a yellow background color and bold text. To achieve this result in Tailwind, one would have to apply a set of classes created by the library: bg-yellow-200 and font-bold.

Features

Due to the difference in basic concepts in relation to other traditional CSS frameworks such as Bootstrap, it is important to know the philosophy from which Tailwind was created, as well as its basic usage.

Utility Classes

The utility-first concept refers to the main differentiating feature of Tailwind.[6] Instead of creating classes around components (button, panel, menu, textbox ...), classes are built around a specific style element (yellow color, bold font, very large text, center element...). Each of these classes is called utility classes.

There are many utility classes in TailwindCSS that enable to control a large number of CSS properties like colors, border, display type (display), font size and font, layout, shadow...

Example: yellow notice
Result FExample Tailwind yellow warning.png
Code 
<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>
Clases Tailwind CSS equivalent
m-4 margin: 1rem;
p-4 padding: 1rem;
bg-yellow-200 background-color: rgba(229, 231, 235, 1);
font-bold font-weight: 700;
rounded-lg border-radius: 0.5rem;

Variants

Tailwind offers the possibility to apply a utility class only in some situations through media queries, which is called a variant. The main use of variants is to design a responsive interface for various screen sizes.[7] There are also variants for the different states an element can have, such as hover : for when hovered, focus: when keyboard selected or active: when in use,[8] or when the browser or operating system has dark mode enabled.[9]

Variants have two parts: the condition to be met and the class that is applied if the condition is met. For example, the variant md:bg-yellow-400 will apply the class bg-yellow-400 if the screen size is greater than the value defined for md.

Tailwind CSS is developed using JavaScript, runs via Node.js, and installs with environment package managers like npm or yarn.[10]

Settings and Themes

It is possible to configure the utility classes and variants that Tailwind offers through a configuration file usually named tailwind.config.js. In the configuration one can set the values of the utility classes, such as the color-palette or the sizes between elements for margins.

Build All and Purge

The default mode of Tailwind is that the system generates all possible CSS combinations based on the project settings. Then, by means of another utility such as PurgeCSS, all the files are traversed, and the classes that are not being used are removed from the resulting CSS file.

Due to the number of classes that can be generated by the number of variants and their combinations, this method has the drawbacks of long waiting times and large sizes of CSS files before being purged. This mode of operation is no longer be available in version 3 of Tailwind CSS.[11]

JIT

JIT mode (Just-In-Time) is an alternative way to generate the CSS that, instead of generating all possible classes and then removing all those that are not being used, parses the content of HTML files (or configured extensions or locations) and instantly generates only those classes that are needed and used.

Because all possible variables are no longer generated, the waiting time and size of the resulting CSS files is greatly reduced.[citation needed] This technical improvement has made it possible to introduce numerous new variants and utility classes, as well as the ability to create utility classes on the fly with arbitrary values ​​not set in the configuration.

Starting with version 3 of Tailwind CSS, JIT mode will become the default.[11]

Versions

Tailwind CSS uses semantic versioning to identify its version compatibility.

Prominent uses

See also

References

  1. ^ "Tailwind Labs".
  2. ^ "Release 3.4.14". 15 October 2024. Retrieved 27 October 2024.
  3. ^ "Github: tailwindlabs/tailwindcss, LICENSE".
  4. ^ Gerchev, Ivaylo (2022). Tailwind CSS. Sebastopol: O'Reilly Media. ISBN 1-0981-4099-0. OCLC 1314257318.
  5. ^ Rappin, Noel (2021). Modern CSS with Tailwind flexible styling without the fuss. Raleigh. ISBN 978-1-68050-857-4. OCLC 1277046918.{{cite book}}: CS1 maint: location missing publisher (link)
  6. ^ "Utility-First - Tailwind CSS". tailwindcss.com. Retrieved 2021-11-13.
  7. ^ "Responsive Design - Tailwind CSS". tailwindcss.com. Retrieved 2021-11-13.
  8. ^ "Hover, Focus, & Other States - Tailwind CSS". tailwindcss.com. Retrieved 2021-11-13.
  9. ^ "Dark Mode - Tailwind CSS". tailwindcss.com. Retrieved 2021-11-13.
  10. ^ "Installation - Tailwind CSS". tailwindcss.com. Retrieved 2021-11-13.
  11. ^ a b "Release v3.0.0-alpha.1 tailwindlabs/tailwindcss". GitHub. Retrieved 2021-11-13.
  12. ^ "GitHub Copilot · Your AI pair programmer". GitHub Copilot. Retrieved 2021-10-18.
  13. ^ "Firefox Accounts". accounts.firefox.com. Retrieved 2021-10-18.
  14. ^ "From semantic CSS to Tailwind - Refactoring the Netlify UI codebase". Netlify. Retrieved 2021-10-28.
  15. ^ "The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com". www.nba.com. Retrieved 2021-10-18.
  16. ^ "NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration". NASA Jet Propulsion Laboratory (JPL). Retrieved 2021-10-18.
  17. ^ "Netflix Top 10 - Global". top10.netflix.com. Retrieved 2021-11-21.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=1112962371"