Skip to main content

PostCSS and Tailwind CSS

If there is a PostCSS config somewhere (found by postcss-load-config), Drayman will automatically set it up.

By default a src/styles.css file will be passed to PostCSS as a source and public/styles.css file as an output. This behavior can be changed with postcss option inside Drayman configuration file.

Install Tailwind CSS#

It is possible to use Tailwind CSS because Drayman supports PostCSS out of the box. You just need to follow few steps to make it work.

Install autoprefixer and tailwindcss#

npm install -D tailwindcss@latest autoprefixer@latest

Create config files#

npx tailwindcss init -p

This command will generate tailwind.config.js and postcss.config.js files.

Modify tailwind.config.js file#

tailwind.config.js
module.exports = {  purge: [    "./src/**/*.tsx",  ],  darkMode: false,  theme: {    extend: {},  },  variants: {    extend: {},  },  plugins: [],};

Include Tailwind in your CSS#

Open your main CSS file (by default Drayman will check src/styles.css) and append this code:

src/styles.css
@tailwind base;@tailwind components;@tailwind utilities;

Modify public/index.html file to include generated CSS file (by default Drayman generates it to the public/styles.css file):

public/index.html
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>Drayman Framework</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <script src="/drayman-framework-client.js"></script>    <link rel="stylesheet" href="styles.css" />  </head>
  <body>    <drayman-element component="home"></drayman-element>
    <script>      initializeDraymanFramework();    </script>  </body></html>