CSS Maid 完 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

Last update: Sep 1, 2021

CSS Maid

css-maid logo

What is it?

CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on tag, and many more! This tool was built using emotion & typescript!

Installation

# install with npm
npm i css-maid

# install with yarn
yarn add css-maid

Quick Start

  • Javascript
import Maid from 'css-maid'

const App = () => {
  return (
    <div>
      <a href='#'>Hello World!</a>
      <ul>
        <li>React</li>
        <li>CSS</li>
        <li>Maid</li>
      </ul>
      
      <Maid />
    </div>
  )
}
  • TypeScript
import React from 'react'
import Maid from 'css-maid'

const App: React.FC = () => {
  return (
    <div>
      <a href='#'>Hello World!</a>
      <ul>
        <li>React</li>
        <li>CSS</li>
        <li>Maid</li>
      </ul>
      
      <Maid />
    </div>
  )
}

Features

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

body {
  line-height: 1;
}

a {
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

input, textarea {
  outline: none;
}

textarea {
  resize: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

GitHub

https://github.com/joshxfi/css-maid
You might also like...

抽 CSS-in-JS library designed for high performance style composition

抽 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

Jun 24, 2022

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Isomorphic CSS style loader for Webpack CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rend

Jun 25, 2022

JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

Jun 23, 2022

Autoprefixer for JavaScript style objects

inline-style-prefixer A small, simple and fast vendor prefixer from JavaScript style object. Support Us Support Robin Frischmann's work on Fela and it

Jun 11, 2022

A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022

Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022

TailwindCss plugin to export Typescript typings, helpers and const from your config.

TailwindCss plugin to export Typescript typings, helpers and const from your config.

Tailwind TS Generator ∴ Generate Tailwind type from your own configuration! This package is a Tailwindcss plugin that generates code out of your tail

Jun 14, 2022

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Jun 11, 2021
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
A tool for creating ratio-based style systems built in React.
A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. Its built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Dec 29, 2021
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??儭 A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jun 18, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

Jun 27, 2022
A terminal style/styled portfolio website made with <3 using react.

A Terminal Styled Portfolio Website. ????, a terminal style/styled portfolio website made with <3 using react.

Jun 23, 2022
A toolchain for React component styling.

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

Jun 23, 2022
TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

Jun 22, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022