Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/toughyear/tailwind-react-boilerplate

This is a create-react-app and tailwind based boilerplate with both development and production scripts (minified CSS).
https://github.com/toughyear/tailwind-react-boilerplate

Last synced: 2 days ago
JSON representation

This is a create-react-app and tailwind based boilerplate with both development and production scripts (minified CSS).

Awesome Lists containing this project

README 

        
# tailwind-react-boilerplate :snowflake:



[![GitHub license](https://img.shields.io/github/license/toughyear/tailwind-react-boilerplate?style=flat-square)](https://github.com/toughyear/tailwind-react-boilerplate/blob/master/LICENSE) [![Tailwind CSS](https://img.shields.io/badge/tailwind-css-blue?style=flat-square)](https://tailwindcss.com/) [![GitHub stars](https://img.shields.io/github/stars/toughyear/tailwind-react-boilerplate?style=flat-square)](https://github.com/toughyear/tailwind-react-boilerplate/stargazers)



#### [Go to Live Demo :arrow_upper_right:](https://tailwind-react-boilerplate.now.sh/)



This is a create-react-app and tailwind based boilerplate with both development and production scripts (minified CSS).



This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).



### How to use this boilerplate? :blue_heart:



Clone the repo or download this. Go to the directory and run command:

`npm install`



This will install all the necessary dependencies.

Now you can start building your react app just like you would in a CRA. No need to import any css files. Use intellisense to find the appropriate classes and make an awesome project!



Starting point for the project is: `index.js`



### Importing tailwind.generated.css :rocket:



You only need to add this once in index.js:

`import "./tailwind.generated.css";`

As it has already been added for you in index.js and is accesible to all components you don't need to do anything.



## Available Scripts :penguin:



In the project directory, you can run:



### `npm start` :watch:



Runs the app in the development mode and watches for changes in tailwind classes.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.



The page will reload if you make edits.


You will also see any lint errors in the console.



### `npm test` :briefcase:



Launches the test runner in the interactive watch mode.


See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.



### `npm run build` :hammer:



Builds the app for production to the `build` folder. Tailwind css generated is minified.


It correctly bundles React in production mode and optimizes the build for the best performance.



The build is minified and the filenames include the hashes.


Your app is ready to be deployed!



See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.



## Leave a star !! :star:



Leave a github star if you found this repo useful. This helps in increasing the visibility of this repo and others finding it too.



## Have a question? :question:



If you have a question, feel free raise an issue in repo or ask me here: [twitter](https://twitter.com/RajeevSinghN).



## Do you want to contribute? :gift:



Become a contributor in maintaining this boilerplate.

Although we want to keep this repo as minimal as possible, we are also looking for adding more features and create a more complicated template project integrated with Firebase :fire: and other awesome features. Connect with me here: [twitter](https://twitter.com/RajeevSinghN).