Skip to content

How do I add Tailwind to a SAFE project?

Tailwind is a utility-first CSS framework packed that can be composed to build any design, directly in your markup.

  1. Add a stylesheet to the project

  2. Install the required npm packages

    npm install -D tailwindcss postcss autoprefixer postcss-loader

  3. Initialise a tailwind.config.js
    npx tailwindcss init
  4. Amend the content array in the tailwind.config.js as follows

    module.exports = {
      content: [
      theme: {
        extend: {},
      plugins: [],

  5. Create a postcss.config.js with the following

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},

  6. Add the Tailwind layers to your style.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  7. Find the module.rules field in the webpack.config.js and in the css files rule’s use field add postcss-loader

        test: /\.(sass|scss|css)$/,
        use: [
                ? MiniCssExtractPlugin.loader
                : 'style-loader',
                loader: 'sass-loader',
                options: { implementation: require('sass') }

  8. In the src/Client folder find the code in Index.fs to show the list of todos and add a Tailwind text colour class(text-red-200)

    for todo in model.Todos do [
            prop.classes [ "text-red-200" ]
            prop.text todo.Description

You should see some nice red todos proving that Tailwind is now in your project