Tutorials / Tools /

Format CSS in the Browser

Aug 22, 2022

Format Your CSS

Input your css into the text field below and it will be formatted to use 2-space indent.

This tool uses prettier.format() to format CSS. format() takes 2 parameters:

text, which is what you input into the textbox
options, which indicates specific format preferences like tab width and end of line characters.

Here's the code we use to format the CSS:

let initial = prettier.format(text, {
  parser: 'css',
  plugins: prettierPlugins,
  tabWidth: 2,
  endOfLine: 'auto'
});

We import Prettier from unpkg as follows:

<script src="https://unpkg.com/prettier@2.7.1/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.7.1/parser-postcss.js"></script>

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!