Latex Tailwind: Bringing the LaTeX Look to Tailwind

Latex Tailwind

This is designed with a similar idea to Tailwind CSS Typography, but following the design proposed by Latex.css.

To use it, add latex-style to a HTML element, in the same way as you would use prose with Tailwind CSS Typography.

You can see an example of how this works here

This provides two options under the theme key,

module.exports = {
    //...
    theme: {
        latex: {
            footnotes: true,
            syntax: true,
        },
    },
    plugins: [require("latex-tailwind")],
};

footnotes will enable the styling for footnotes, this works based on the footnotes class, so will be applied across your site

syntax enables syntax highlighting, this is designed for prism.js

Download Details:
Author: samrobbins85
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/samrobbins85/latex-tailwind 
License: MIT
 

#tailwind #tailwindcss #css #webdev 

What is GEEK

Buddha Community

Latex Tailwind: Bringing the LaTeX Look to Tailwind

Latex Tailwind: Bringing the LaTeX Look to Tailwind

Latex Tailwind

This is designed with a similar idea to Tailwind CSS Typography, but following the design proposed by Latex.css.

To use it, add latex-style to a HTML element, in the same way as you would use prose with Tailwind CSS Typography.

You can see an example of how this works here

This provides two options under the theme key,

module.exports = {
    //...
    theme: {
        latex: {
            footnotes: true,
            syntax: true,
        },
    },
    plugins: [require("latex-tailwind")],
};

footnotes will enable the styling for footnotes, this works based on the footnotes class, so will be applied across your site

syntax enables syntax highlighting, this is designed for prism.js

Download Details:
Author: samrobbins85
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/samrobbins85/latex-tailwind 
License: MIT
 

#tailwind #tailwindcss #css #webdev 

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

  • Introducing Tailwind CSS
  • Adding Tailwind CSS to your project via a package manager
  • Creating the configuration file and process your CSS with Tailwind
  • Building a responsive hero section using the utility-first classes from Tailwind
  • Customize fonts, colors and add extra classes using the configuration file
  • Reduce loading time and file size by purging the unused classes from your CSS
  • Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

Figma design kit built to integrate with Tailwind CSS

Hey everyone ✌🏻

Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.

You can check out and duplicate the project from the Figma community.

It’s open source 💙

#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

Rylan  Becker

Rylan Becker

1618420560

Tailwind CSS v2.1 is now released

Tailwind v2.1 was just released with a new JIT Engine, Filter and Backdrop-filter Utilities, and more. Let’s take a look at some of the new features.

JIT Engine

A few weeks ago, the Tailwind team released a package they were using to expiriment with a just-in-time compiler for Tailwind. With the release of Tailwind v2.1, the JIT compiler is included in Tailwind core. Just add mode: 'jit' to your Tailwind config file and configure the purge property to scan your markup.

#news #tailwind #tailwind css #tailwind css v2.1