Custom Fields
Re-Envisioned
Support MB Views How can we use Tailwind or Bootstrap CSS in MB Views

  • Creator
    Topic
  • #28397
    Resolved Joseph Shrock
    Participant

    What would be the easiest way to get TailwindCSS or even Bootstrap CSS to working in MetaBox Views?

    Could we just drop in some code or pull in a cdn-url in the "CSS tab" of views perhaps? Or is there a Wp-Plugin to install and we are up and running?

    A code example provided in the answer would be extremely helpful, please?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #28413
    Long Nguyen
    Moderator

    Hi Joseph,

    Please follow this topic https://metabox.io/support/topic/tailwindcss/ to know how to use the Tailwind CSS in View.

    Do the same if you want to use Bootstrap https://getbootstrap.com/docs/4.3/getting-started/introduction/

    #28450
    Joseph Shrock
    Participant

    Thank-you and also thanks to some code I found elsewehere, I was also able to get it enqueued via a wp-plugin called Code Snippets but it would have also worked in the functions.php file as well.

    <?php
    function pwwp_enqueue_my_scripts() {
        // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts 
        wp_enqueue_script( 'bootstrap-js', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
    }
    add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');
    
    function pwwp_enqueue_my_styles() {
        wp_enqueue_style( 'bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' );
    
        // this will add the stylesheet from it's default theme location if your theme doesn't already
        //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
    }
    add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
    ?>

    And here is the one used for TailwindCSS

    <?php
        function pwwp_enqueue_my_styles() {
        wp_enqueue_style( 'bootstrap', '//unpkg.com/tailwindcss@2.1.2/dist/tailwind.min.css' );
    
        // this will add the stylesheet from it's default theme location if your theme doesn't already
        //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
    }
    add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
    ?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.