TailwindCSS plugin that adds utilities for the `all` CSS property

  • By Arthur Denner
  • Last update: Oct 28, 2022
  • Comments: 1

tailwindcss-all

TailwindCSS plugin that adds utilities for the all CSS property.

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties.

It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

Check the MDN page for examples of the property.

Usage

npm install tailwindcss-all
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-all'),
  ],
};

Utilities

  • all-initial
  • all-inherit
  • all-revert
  • all-unset

References

Github

https://github.com/arthurdenner/tailwindcss-all

Comments(1)

  • 1

    This doesn't seem to work?

    index.tsx

    const Home = () => {
      return (
        <div>
          <h1>Hello, World</h1>
    
          <div className="all-unset">
            <button>Click me</button>
          </div>
        </div>
      );
    };
    
    export default Home;
    

    tailwind.config.js

    module.exports = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [require("tailwindcss-all")],
    };
    

    Output

    image