Jquery plugin not working with Rails 4

Question

I'm new to RoR and JS and could use some help understanding how some of these pieces fit together. I've read a number of resources and I thought I understood what to do, but something is still escaping me.

I want to create an interface for entering tags, much like the one here on Stack Overflow. I found the following plugin that has all the features I would eventually like to fiddle with: http://xoxco.com/projects/code/tagsinput/

So here is what I did:

1) I downloaded the zip.
2) I placed jquery.tagsinput.js and jquery.tagsinput.min.js into vendor/assets/javascripts.
3) I placed jquery.tagsinput.css into vendor/assets/stylesheets.
4) In my views/nuggets/index.html.erb, I added <input name="tags" id="tags" value="foo,bar,baz" />
5) In my app/assets/javascripts/nuggets.js.coffee, I added $('#tags').tagsInput();

When I noticed that the input was not working as expected, I checked the page's source and noticed that the following lines were not there:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

As a result, I thought I should add //= require jquery.tagsinput to app/assets/javascripts/application.js and *= require jquery.tagsinput to app/assets/stylesheets/application.css.

I'm sure this will all seem very trivial in retrospect, but I'm quite lost at this point.

Thanks for your help,

Grasswistle

Edit, adding info for @user1965817:
Contents of app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery.tagsinput

Contents of app/assets/stylesheets/application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

*= require jquery.tagsinput

body 
{
    background-color:#C5C5F0;
    font-family: Geneva, Tahoma, Verdana, sans-serif;
}

.header 
{
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    font-size:30px;
    text-align:center;

    top: 0px;
    margin:0px;  
    padding: 0px 2px 2px 3px;   
    margin-bottom: 70px; 
    border-width: 2px;
    border-bottom: 1px gray solid;
    width: 70%;
}

Answer 1

Your CSS Is Incorrect

You need to keep the require statements at the top of your file (not seperated):

 *= require_self
 *= require_tree .
 *= require jquery.tagsinput
 */

Have You Initialized The Tags JS?

In order to initialize the script, you have to be able to "call" the plugin, like this:

$('#tags').tagsInput({
    //parameters here
});