🚀 Fast & easy TailwindCSS API for everyone

Installed versions

PHP

<?php

// Require
require('tailwindapi.php');

// Init
$tailwind = new TailwindAPI();

// Build
$css $tailwind->build(array(
    
'css' => 'path/to/postcss.css',
    
'config' => 'path/to/config.js',
    
'autoprefixer' => true,
    
'minify' => false
));

CURL

curl -d '{"autoprefixer":true, "minify":false}' -H "Content-Type: application/json" -X POST https://www.tailwindapi.com/api/v1/build

Default usage

<?php

// Require
require('tailwindapi.php');

// Init
$tailwind = new TailwindAPI();

// Build
$css $tailwind->build(); // Return default Tailwind compilation

Default arguments

<?php

$css 
$tailwind->build(array(
    
'css'           => false// Default: Tailwind PostCSS (@tailwind base; @tailwind components; @tailwind utilities;)
    
'config'        => false// Default: Tailwind Config (module.exports = {theme:{extend:{}},variants:{},plugins:[]})
    
'autoprefixer'  => true,  // Default: Autoprefixer enabled
    
'minify'        => true,  // Default: Minify enabled
    
'prefixer'      => false// Default: Prefixer disabled
    
'output'        => false// Default: Return compiled CSS
));

Custom inline configuration

<?php

$css 
$tailwind->build(array(
    
'css' => '
        @tailwind base;
        @tailwind components;
        
        .btn{
            
            @apply bg-blue-500 font-bold;
            
            &:hover{
                @apply bg-blue-800;
            }
            
        }
        
        @tailwind utilities;
    '
,
    
'config' => '
        module.exports = {
            theme: {
                colors: {
                    indigo: "#5c6ac4",
                    blue: "#007ace",
                    red: "#de3618",
                }
            }
        }
    '
,
));

Custom configuration files

<?php

$css 
$tailwind->build(array(
    
'css' => 'path/to/postcss-file.css',
    
'config' => 'path/to/config.js',
));

Prefixer usage

<?php

$css 
$tailwind->build(array(
    
'prefixer' => '.my-prefix'
));

$css $tailwind->build(array(
    
'prefixer' => array(
        
'prefix' => '.my-prefix',
        
'exclude' => array('html')
    )
));

Ouput to file

<?php

$css 
$tailwind->build(array(
    
'output' => 'path/to/output.css'// PHP needs write permission
));

Usage examples

curl -d '{"autoprefixer":true, "minify":false}' -H "Content-Type: application/json" -X POST https://www.tailwindapi.com/api/v1/build
curl -d '{"css": "@tailwind base; @tailwind components; .btn-blue{@apply bg-blue-500 text-white;} @tailwind utilities;"}' -H "Content-Type: application/json" -X POST https://www.tailwindapi.com/api/v1/build
curl -d '{"css": "@tailwind base; @tailwind components; @tailwind utilities;", "config": "module.exports = { theme: { colors: { indigo: \"#5c6ac4\", blue: \"#007ace\", red: \"#de3618\", } } }"}' -H "Content-Type: application/json" -X POST https://www.tailwindapi.com/api/v1/build
TailwindCSS + Autoprefixer + Minify
tailwind.autoprefixer.min.css 1 929 ko
TailwindCSS + Autoprefixer
tailwind.autoprefixer.css 2 386 ko
TailwindCSS + Minify
tailwind.min.css 1 649 ko
TailwindCSS
tailwind.css 2 050 ko
Learn more about TailwindCSS